Vue中的img标签对src属性使用动态绑定问题——两种方法

方法一：

正常来说，一些图片的资源我们会放在src文件夹的asset文件夹中。

这样的话将src属性写死是没有问题的。

但是如果想使用动态绑定就需要在根目录的public文件夹下新建一个static文件夹用来存储静态文件。

这样就可以直接访问到了。

<img:src="'/static/' + item.label.split(' ')[0].toLowerCase() + '.png'":alt="item.label"style="width: 100%; height: 100%">

方法二：

如果就放在asset文件夹下的话，可以通过require进行资源引入，然后利用变量进行替换。

this.pic = require('@/asset/pic.png')

之后将pic变量绑定到src上即可。