大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势。
以下正文:
今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章。
通常,我们的一个img标签在html中是这么写的:
<img src="../images/demo.png">
这种写法只能引用相对路径下的图片。不能使用绝对路径。使用绝对路径的话,这类资源将会直接被拷贝,而不会经过 webpack 的处理。
如果src是变量的话,我们一般会在data中定一个变量src进行动态绑定。
<img :src="src">
//data中定义变量src
data() {
return {
src: '../images/demo.png'
}
}
然而这时候,会发现这个时候图片并没有被加载出来,图片没有显示出来,通过查看发现这张图片的地址显示 ../images/demo.png
,也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader
处理,只会做简单的文本替换。
那怎么办呢?
解决方法
1、将图片转**base64
**格式
<img src="https://img-blog.csdnimg.cn/2022010707380395407.png">
</