vue中绑定动态的图片

在vue中动态绑定图片还是经常会用到的,下面我来分享一下我动态绑定图片的方法

在vue中绑定动态的src有一下几个步骤:

一、把本地用动态绑定的图片写成数组或者对象。如下

vue中绑定动态的图片_第1张图片

二、在组建中使用,实现动态绑定

v-bind:src="";可以简写为:src。具体的写法看下面

接下来我们看看效果啊

如果按照我上面的写法就会出现上图的问题,图片出不来,海报404错误。

解决办法:

vue中绑定动态的图片_第2张图片

表示我们的图片要用require引进来,静态资源都要用require引入。

改写成这样之后,我们在看看效果

vue中绑定动态的图片_第3张图片

如果动态绑定的图片的时候也出错了,记得检查一下是否是这个问题哟,因为很容易忽略掉。

你可能感兴趣的:(Vue,Vue,Vue动态绑定图片,:src,组件中动态绑定src)