关于前端:vue如何动态加载本地图片

大家好，我是前端队长 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="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">

个别图片比拟小的能够这么做，比方图标 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>
export default:{data(){
        return {publicPath: process.env.BASE_URL,}
    },
}
</script>

在 vue.config.js 中配置 publicPath 门路：

//vue.config.js
module.exports = {
    publicPath:'/foo/',
    ...
}

动态资源 能够通过两种形式进行解决：

在 JavaScript 被导入 或在 template/CSS 中通过 相对路径 被援用。这类援用会被 webpack 解决。
搁置在 public 目录下或通过 绝对路径 被援用。这类资源将会间接被拷贝，而不会通过 webpack 的解决。

从相对路径导入

当你在 JavaScript、CSS 或 *.vue 文件中应用相对路径 (必须以 . 结尾) 援用一个动态资源时，该资源将会被蕴含进入 webpack 的依赖图中。

在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

用 绝对路径引入 时，门路读取的是 public 文件夹中的资源，任何搁置在 public 文件夹的动态资源都会被简略的复制到编译后的目录中，而不通过 webpack 非凡解决。

当你的利用被部署在一个域名的根门路上时，比方http://www.abc.com/，此时这种引入形式能够失常显示然而如果你的利用没有部署在域名的根部，那么你须要为你的 URL 配置 publicPath 前缀，publicPath 是部署利用包时的根本 URL，须要在 vue.config.js 中进行配置。

如果咱们心愿在页面引入图片（包含 img 的 src 和 background 的 url）。当咱们基于 webpack 进行开发时，引入图片会遇到一些问题。

其中一个就是援用门路的问题。拿 background 款式用 url 引入背景图来说，咱们都晓得，webpack 最终会将各个模块打包成一个文件，因而咱们款式中的 url 门路是绝对入口 html 页面的，而不是绝对于原始 css 文件所在的门路的。这就会导致图片引入失败。这个问题是用 file-loader 解决的，file-loader 能够解析我的项目中的 url 引入（不仅限于 css），依据咱们的配置，将图片拷贝到相应的门路，再依据咱们的配置，批改打包后文件援用门路，使之指向正确的文件。

另外，如果图片较多，会发很多 http 申请，会升高页面性能。这个问题能够通过 url-loader 解决。url-loader 会将引入的图片编码，生成 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 即可。

原文链接：https://www.cnblogs.com/weiza…

依照下面实践，如果我采纳相对路径的形式引入图片的话，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 
  :style="{'background':'url('+ require('./iphonexs.png') +') 0 0 no-repeat'}">
</div>

https://cli.vuejs.org/zh/guid… 解决动态资源
https://segmentfault.com/a/11…
https://github.com/vuejs/vue-…

（完）

如果有问题能够帮我指出，感激！

— End —

你好，我是前端队长 Daotin，专一分享前端与认知。心愿在这里，和你分享我的前端学习和工作教训，记录个人成长。

想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿态。

关于前端:vue如何动态加载本地图片

解决办法

论断

原理

扩大

对于 vue file-loader vs url-loader

对于 background url 引入图片时

Reference