关于Img标签绑定:src不显示图片

Posted 2023-04-11

参考技术A 因为是自己封装的组件    发现图片根本不显示

解决方法

引用本地图片需要加上require，使用require定义之后，就可以动态使用了，不用require你就只能写死的。不用 :src="’…/img/image.jpg’" 会被解析为字符串

vue绑定动态img标签的src地址

<li v-for="(item,index) in images" :key="index">

<img :src="item.src"></li>

如果使用vue-lazyloader就是

<img v-lazy="item.src"></li>

用js动态加载assets或者本文件的图片出现404的状态码，是vue-lazyloader出现404的原因也是如此。

原因：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后npm run dev 或者npm run build之后导致路径没有被加工。

https://blog.csdn.net/mr_yanyan/article/details/78783091

解决方法：

https://blog.csdn.net/qq_39313596/article/details/84644500

加个require()

<img :src="require(‘../assets/images/‘+imgsrc+‘.png‘)"/>

<img v-lazy="require(‘../assets/images/‘+imgsrc+‘.png‘)"/>

注意：require(../assets/images/）这部分是吧整个images文件夹都加载进来了，images文件夹中有些没有用到的图片也会被加载进来。

这里有个问题就是image中的图片是全部加载进来，如果有很多图片需要加载进来会影响网页运行速度吗？

更好的解决方法暂时没想出，先留坑吧。