Vue中的img标签对src属性使用动态绑定问题——两种方法
方法一:正常来说,一些图片的资源我们会放在src文件夹的asset文件夹中。这样的话将src属性写死是没有问题的。但是如果想使用动态绑定就需要在根目录的public文件夹下新建一个static文件夹用来存储静态文件。这样就可以直接访问到了。<img:src="'/static/' + item.label.split(' ')[0].toLowerCase() + '.png'":alt="
·
方法一:
正常来说,一些图片的资源我们会放在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上即可。
更多推荐



所有评论(0)