vue-cli构建的项目中图片路径以变量形式传入时显示解决办法

vue-cli构建的项目中图片路径以变量形式传入时显示解决办法

在vue-cli构建的项目中，直接将图片路径以变量形式传入时，图片在页面中是显示不出来的。

前提：使用vue-cli脚手架构建的项目

1、在vue文件中如果想使用一张图片，可以将图片相对于该vue文件的相对地址填充在img标签的src中，页面中便可显示图片。

这样引入之后，可以看出，图片正常显示，页面中的图片地址变成了/static/img/1.3d252fb.png，这表明图片被解析成功。

2、上面处理方法对于显示一张图片是很方便的，当需要显示比较多的照片的时候，如果通过1中的方法会需要写很多img标签，如果能够将所有的图片的相对路径通过变量的形式传递进来，通过for循环来将所有的图片显示出来，这样会方便很多，如下所示：

其中item.stepImg存储着图片的相对路径。

如果将图片路径作为变量直接传递，页面会无法正常显示图片：

页面中图片的途径是../assets/img/1.png，没有被解析，所以未正常显示。这是因为图片作为一种资源并没有被引入进来，通过变量仅仅传递进来的是一个可以表示图片地址的字符串。

解决方法：

使用require对图片路径进行引用，这样通过变量传递的不是字符串而是图片资源。

这样引入之后，图片可以正常解析，页面中也可以正常显示了。

参考文献

[1] vue-cil和webpack中本地静态图片的路径问题解决方案