目录
一、浏览器报错
二、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的状态。
希望能帮到你！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
