目录

一、浏览器报错

二、Redis里缓存数据

三、依次排除了以下可能的原因

1.文件夹访问权限原因。右键属性-安全。（依然无法显示）

2.图片路径原因。（依然无法显示）

3.浏览器缓存原因。（依然无法显示）

4.Redis原因。（依然无法显示）

5.数据库原因（依然无法显示）

6.前端

6.1 加三元表达式（不推荐）（依然无法显示）

6.2 打印数据，找出问题所在！（显示出来了！）

---

一、浏览器报错

二、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的状态。

 

 希望能帮到你！