前端图片加载失败显示默认图片，onerror不生效，onerror用法

前端图片加载失败显示默认图片HTML部分，给img标签添加属性onerror绑定下面的imgOnerror方法<img :onerror="imgOnerror" :src="imageURL"/>以下是vue3写法，先导入图片，再复制，直接给img.src赋值图片路径，可能会导致图片路径识别失败，onerror属性不生效主要还是看路径是否正确// 第一步导入默认图片const IMG

一只小炸毛

3166人浏览 · 2022-04-27 14:56:10

一只小炸毛 · 2022-04-27 14:56:10 发布

前端图片加载失败显示默认图片

HTML部分，给img标签添加属性onerror绑定下面的imgOnerror方法

<img :onerror="imgOnerror" :src="imageURL"/>

以下是vue3写法，先导入图片，再赋值，直接给img.src赋值相对或绝对图片路径，可能会导致图片路径识别失败，onerror属性不生效主要还是看路径是否正确

// 第一步导入默认图片
const IMGSRC = require('../../assets/images/empty.png')
const imgOnerror = e => {
  let img = e.srcElement
  img.src = IMGSRC
  img.onerror = null
}

在这里插入图片描述

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}$/, //不连续的两位字母// /^