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中本地静态图片的路径问题解决方案

猜你喜欢

转载自blog.csdn.net/XuM222222/article/details/81661158
今日推荐