又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”...
事情是这样的: 接口字段有图片则用接口中的,没有则用本地默认图片...这种写法看似可以,结果很失望——默认图片显示不出来...于是F12查看图片路径,结果发现...
这个路径怎么就变成了这样,后来才知道...网页把根域名作为相对路径的根目录了,这样解析出来的路径当然找不到图片资源。这里还有一个重点:动态添加src被当做静态资源处理了,没有进行编译。如果是
问题的根源知道了,接下来就是解决问题,这里有3种方案,网上都有...运气好的话不会掉到小坑里,运气差的话,像我...阴沟里差点翻船...下面来一一分析...
1、用网络地址
把图片放在cdn或自己的服务器上,把网络地址存在imgUrl里,然后直接去展示...这种方式很省心,唯一的缺点就是要保证你的服务器不会挂掉...
2、把图片放在src同级的static文件夹下
刚才我们说了,网页把根域名作为相对路径的根目录了,所以导致路径出错...既然是这样,我们把图片放在src同级的static目录下,由于这个目录是项目的根目录,所以 :src = item.img?item.img : '/static/def