【已解决】vue中img的动态赋值src不显示图片-QUI-Notes

新手在使用vue的过程中总是会遇到各种坑，很多都是小水坑，比如说：vue中img的动态复制src不显示图片，明明src有值，浏览器却没有渲染？很多人只知道用require加载一下，却不知道什么原理！ 

<img :src="urls" alt="">

错误使用：

urls: "../../static/image/test.png";

这样配置的图片被当作字符串传递了，并没有作为图片资源加载，虽然浏览器src有值，但是就是看不到图片。

正确使用：

urls: require("../../static/image/test.png");

问题原因：

webpack在打包得时候，require引用动态资源经过loader处理成base64的资源，然后浏览器渲染转码后的资源图片，没有使用require动态引入，没有经过loader处理，资源是无法正常访问的。这也是为什么，我们F12检查查看图片路径的时候发现图片后面多了很多随机字符串，或者直接变成base64格式的资源了。

总结：

所以，图片引用的时候，静态资源可以直接："../../static/image/test.png" ；但是动态的一点要用 require("../../static/image/test.png") 。

最近发现自己变得很堕落，新的一年希望自己变成熟，自信，自律！喜欢一件事，就要坚持下去。2022年，坚持更新文章-不低于800篇，开发主题-新增2个免费主题。加油，陈小知。