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

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
}

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐