vue动态引入本地图片路径问题

vue开发中图片的引用是最为常见的操作,网路图片我们只需要引入对应的路径即可,那么如果该图片是本地的我们要如何引用呢?

常规用法:

<img class='swiImg' :src="../../assets/banner/1.png" width="100%" />

使用方面,最终会发现图片路径并未被正常编译,即最终结果图片不能正常展示。

那么这时候我们要如何处理才能使图片路径进行正常编译、显示呢?

<img class='swiImg' :src="require('../../assets/banner/1.png')" width="100%" />

通过require引入后,再进行编译便会发现图片进行了正常编译,图片路径正常。

那么也就是说动态添加的图片需要通过require进行路径的编译才能正常展示。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!