项目开发经常会遇到图片加载失败,要求在图片加载失败时,显示默认占位图片,经常是图片字段为空或null显示占位图,第一次遇到这样的
onerror 事件会在文档或图像加载过程中发生错误时被触发。
目前是可以满足两个标签
<el-image style="width: 46px; height: 46px"
class="bdr10"
:onerror="defalutLogoUrl"
:src="val.studentIcon?url+val.studentIcon:require('@/assets/image/school/shitumo.png')"
fit="contain"></el-image>
<img v-if="item.imgList!==null"
:onerror="defalutLogoUrl"
:src="url + item.imgList[0].url"
alt="">
data () {
return {
defalutLogoUrl: 'this.src="' + require('@/assets/image/school/nei1.png') + '"',
url: process.env.VUE_APP_BASE_API,
}
},
这样就解决了一部分加载不出来的图片


本文介绍了在项目开发中如何处理图片加载失败的问题,通过使用HTML的`onerror`事件结合Vue.js的指令,实现在图片字段为空或null时显示默认占位图片。示例代码展示了在`el-image`组件和`<img>`标签中应用该方法,确保了部分加载不出来的图片能正常显示占位图。
7576

被折叠的 条评论
为什么被折叠?



