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

新手在使用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个免费主题。加油,陈小知。