前言

遇到问题时不要太着急，往后放一放就过去了，今天这个问题就是在放置一段时间后终于找到了问题的解决点，就来讲讲问题点在哪，以及是怎么解决的吧

本地图片索引不显示

我们本地的静态图片一般都是放在public下的img文件夹中，如果是配置了alize的话就简写一下路径直接使用就可以了。

可能某些小伙伴说我们的图片不是放在这里的，在引用的时候出现了相对路径和绝对路径的问题。

解决办法如下：

<!-- 相对路径 -->
    <img :src="require('../assets/images/' + item)" v-for="item in list" :key="item" alt="">
    // 或者使用模板字符串
    <img :src="require(`../assets/images/${item}`)" v-for="item in list" :key="item" alt="">

    // data 中的 list 属性
    // 存储图片路径
    list: [
    '10005.jpg',
    '10006.jpg',
    '10007.jpg'
]

这里蛀要就是利用require进行路径的变换，在打包编译时图片能够找到正确的位置进行显示

https请求下的图片请求失败

前端开发可以在config中配置请求的方式，默认是http，但是如果你配置https就可以进行https的请求

如果你是https请求那么https:true即可.但是https的请求保护不止是一种方式

我们在vue中配置了https:false。但是我们可能会遇见以下场景：

我们请求的图片都是失败的，而且说是我们的什么证书有问题，需要修改什么nginx配置。

我明明配置的http，怎么图片就是https请求呢，所以这就是导致图片不显示的原因。

解决问题：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

是的，就是这行代码，这行代码就是为了提高数据的安全性会自动的把不安全的请求转化为https请求，把这行代码进行屏蔽掉就可以了