vue中img属性绑定src两种解决方法

说明：当图片中src文件夹下assets内时，我们直接在Dom中以img插入时，图片是可以正常显示，没有问题的。但是，现在我说的情况是我们在data中以数组形式遍历出来时遇到的图片不显示的问题，以下为两种解决方案，大家自行选择。方法一：移动目标图片到static文件夹下<img :src="banner.imgUrl" :alt="banner.name

安稳先生℡

10794人浏览 · 2019-02-27 20:49:21

安稳先生℡ · 2019-02-27 20:49:21 发布

说明：

当图片中src文件夹下assets内时，我们直接在Dom中以img插入时，图片是可以正常显示，没有问题的。
但是，现在我说的情况是我们在data中以数组形式遍历出来时遇到的图片不显示的问题，以下为两种解决方案，大家自行选择。

方法一：移动目标图片到static文件夹下
在这里插入图片描述

<img :src="banner.imgUrl" :alt="banner.name" style="height:360px">

此时图片可以正确显示（比较省心，直接移动图片就行）

方法二：requir(图片原本路径)
在这里插入图片描述

<img :src="banner.imgUrl" :alt="banner.name" style="height:360px">

正常显示，没毛病！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^