vue图片加载失败图片展示不出来

vue图片加载失败图片展示不出来

问题

看截图：

一开始我以为是我前端没有从数据库中查出来，后面通过打印测试发现不是。这个图片地址是存在的，并且能在浏览器中查看。

解决办法

1. 原来代码

   // item.tuser.avatar 和 item.firstPicture 是图片地址，这里我用了for，由于对我们当前问题没什么影响，就没展示出来了，大家只需要知道这就是一个网络上面的图片地址就好了
   <el-avatar style="vertical-align:middle" :src="item.tuser.avatar"></el-avatar>
   ............
   <el-image style="width: 200px; height: 115px" :src="item.firstPicture" >
   </el-image>
   

2. 修改后

   只需要在图片地址前面加一个前缀：'https://images.weserv.nl/?url='+

   <el-avatar style="vertical-align:middle" :src="`https://images.weserv.nl/?url=`+item.tuser.avatar"></el-avatar>
   ...........
   <el-image style="width: 200px; height: 115px" :src="`https://images.weserv.nl/?url=`+item.firstPicture" >
   </el-image>
   

3. 以上做完后一般就展示出图片了