Vue图片路径问题（动态引入）

vue项目中我们经常会遇到动态路径的图片无法显示的问题，以下是静态路径和动态路径的常见使用方法。

1.静态路径

在日常的开发中，图片的静态路径通过相对路径和绝对路径的方式引入。

相对路径：以.开头的，例如./、../之类的。就是相对于自己的目标文件的位置。

绝对路径：以/开头的。就是目标文件的真实路径。表示当前站点的根目录。

(1)静态相对路径

<img src="../../assets/1.png" />

<img src="@/assets/1.png" />

(2)静态绝对路径

一般使用public下的资源

public文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过webpack。你需要通过绝对路径来引用它们。

<img src="images/1.png" />

<img src="/images/1.png" />

2.动态路径

(1)动态相对路径(使用require)

写在HTML里:

<img :src="require('../../assets/' + imageUrl)" />

或者

写在js里

<img :src="imageUrl" />

imageUrl: require('../../assets/' + this.img)

需要注意:使用require不能直接用变量接收地址，一般采用字符串模板或变量名+空字符串。以下为两种写法:

require(`${url}`); //正确用法

require(url + '')

注意:

以上使用的图片都在项目中，如果要使用本地文件或者服务器文件需要将文件上传到指定文件夹里，在采取以下方式:

F:/file/为上传图片指定路径，后面参数为文件名称

(2)动态绝对路径

与静态引入相同。之所以这样是因为public 目录下的文件不会被编译，部署后可以通过绝对路径获取到。如果还放在原来的 assets 目录中，就会被webpack打包成新的文件夹。

参考文章：百度