发现问题
今天遇到⼀个在vue⽂件中引⼊本地图⽚的问题，于是有了这篇⽂章。
通常，我们的⼀个img标签在html中是这么写的：
<img src="../images/demo.png">
如果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="data:image/png;">
⼀般图⽚⽐较⼩的可以这么做，⽐如图标icon等，⼤⼩⼀般在10KB以内的。
2、使⽤**import**引⼊图⽚
<img :src="src">
//使⽤import引⼊
import img from '../images/demo.png'
//data中定义变量src
data() {
return {
src: img
}
}
六级考试多长时间出成绩3、使⽤**require**动态加载
<img :src="src">
/
/data中定义变量src
data() {
return {
src: require('../images/demo.png')
}
}
4、引⼊**publicPath**并且将其拼接在路径中，实现引⼊路径的动态变动
<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// 编译后:
<img src="/foo/images/demo.jpg" alt="">
<script>
2018年湖北省公务员职位表export default:{
data(){
return {
publicPath: v.BASE_URL,
}
},
}
</script>
在fig.js中配置publicPath路径：
本地58同城//fig.js
publicPath:'/foo/',
...
}
结论
静态资源可以通过两种⽅式进⾏处理：
在 JavaScript 被导⼊或在 template/CSS 中通过相对路径被引⽤。这类引⽤会被 webpack 处理。
放置在 public ⽬录下或通过绝对路径被引⽤。这类资源将会直接被拷贝，⽽不会经过 webpack 的处理。
原理
从相对路径导⼊
当你在 JavaScript、CSS 或 *.vue ⽂件中使⽤相对路径 (必须以 . 开头) 引⽤⼀个静态资源时，该资源将会被包含进⼊webpack 的依赖图中。
2023公务员省考成绩查询在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为⼀个模块依赖。
⽤绝对路径引⼊时，路径读取的是public⽂件夹中的资源，任何放置在 public ⽂件夹的静态资源都会被简单的复制到编译后的⽬录中，⽽不经过 webpack特殊处理。云南考试网
扩展
关于vue file-loader vs url-loader
如果我们希望在页⾯引⼊图⽚（包括img的src和background的url）。当我们基于webpack进⾏开发时，引⼊图⽚会遇到⼀些问题。
其中⼀个就是引⽤路径的问题。拿background样式⽤url引⼊背景图来说，我们都知道，webpack最终会将各个模块打包成⼀个⽂件，因此我们样式中的url路径是相对⼊⼝html页⾯的，⽽不是相对于原始css⽂件所在的路径的。这就会导致图⽚引⼊失败。这个问题是⽤file-loader解决的，file-loader可以解析项⽬中的url引⼊（不仅限于css），根据我们的配置，将图⽚拷贝到相应的路径，再根据我们的配置，修改打包后⽂件引⽤路径，使之指向正确的⽂件。
另外，如果图⽚较多，会发很多http请求，会降低页⾯性能。这个问题可以通过url-loader解决。url-loa
der会将引⼊的图⽚编码，⽣成dataURl。相当于把图⽚数据翻译成⼀串字符。再把这串字符打包到⽂件中，最终只需要引⼊这个⽂件就能访问图⽚了。当然，如果图⽚较⼤，编码会消耗性能。因此url-loader提供了⼀个limit参数，⼩于limit字节的⽂件会被转为DataURl，⼤于limit的还会使⽤file-loader进⾏copy。
**url-loader和file-loader是什么关系呢？**简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使⽤url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上⾯的介绍，我们可以看到，url-loader⼯作分两种情况：1.⽂件⼤⼩⼩于limit参数，url-loader将会把⽂件转为DataURL；2.⽂件⼤⼩⼤于limit，url-loader会调⽤file-loader进⾏处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
关于background url引⼊图⽚时
按照上⾯理论，如果我采⽤相对路径的⽅式引⼊图⽚的话，webpack会对其require处理。
background: url('./iphonexs.png') 0 0 no-repeat;
实际上确实如此，我看到页⾯的背景变成：
background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;
这是根据url-loader的配置处理的结果。
或者采⽤动态style的⽅式：
<div
安徽省遴选公告2021:>
</div>
Reference
…
…
总结
到此这篇关于vue动态加载本地图⽚的⽂章就介绍到这了，更多相关vue动态加载本地图⽚内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
发布评论