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

让我再睡一会吧

已于 2023-06-02 14:03:37 修改

阅读量1.1w

点赞数 6

分类专栏： vue 文章标签： vue

于 2022-04-13 16:47:45 首次发布

本文链接：https://blog.csdn.net/weixin_42782272/article/details/124151810

版权

5 篇文章 0 订阅

订阅专栏

方法一：
正常来说，一些图片的资源我们会放在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上即可。

关注