目录
一、浏览器报错
二、Redis里缓存数据
图片本来可以显示,但是加入Redis缓存后,就显示不了了。
我看了N篇回答,并测试了,但都没解决问题。
三、依次排除了以下可能的原因
1.文件夹访问权限原因。右键属性-安全。(依然无法显示)
2.图片路径原因。(依然无法显示)
这个怎么测试的呢?把你的路径拼起来,粘贴到浏览器里看是否能访问。
3.浏览器缓存原因。(依然无法显示)
清空浏览器缓存后,仍然显示不出来。
复制这个代码到浏览器里,回车,清空换缓存。
chrome://settings/clearBrowserData
4.Redis原因。(依然无法显示)
我一开始以为,没从Redis取出来数据,但是当我用debug测试,发现,能够从Redis取出数据。
5.数据库原因(依然无法显示)
数据库应该是没有问题的,因为在加入缓存前可以展示。
6.前端
6.1 加三元表达式(不推荐)(依然无法显示)
<img :src = "this.songList.img?this.songList.img:''">
因为这个方法只是隐藏404报错,不能真正解决问题。不推荐。
6.2 打印数据,找出问题所在!(显示出来了!)
一句话概括:少点了一层data。
注意:我打印this.types时候,发现这里有个data,有个success。问题就出现在这里。
前端 v-for 循环 types 的代码:
<div class="type-box" v-for="t in types" :key="t.id" @click="toShopList(t.id, t.name)">
<div class="type-view"><img :src="'/imgs/' + t.icon" alt="">
</div>
</div>
我在前端的时候,直接显示{{t}}的时候,我才看到明晃晃的 “true”。
再联合后端返回给前端的数据,说明:这里的data赋值的层级不对。
具体来说,这里的data包含了两个东西:一个是redis缓存数据(也是就我们需要循环的数组),一个是状态值success:true。
所以,我们需要再点一层data。像这样:
检查后端代码,是这里统一返回类,返回data数据的时候,还加了success的状态。
希望能帮到你!