当图片404时显示默认图片

最新推荐文章于 2024-01-22 18:30:00 发布

小白阿里里

最新推荐文章于 2024-01-22 18:30:00 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：显示默认图片图片404处理

本文链接：https://blog.youkuaiyun.com/qq_39224266/article/details/82291229

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种处理网页中图片加载失败的方法，通过设置onerror事件，实现图片404时的默认图片显示，并提供了一个VUE中的具体实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当图片未找到或者404时，触发 onerror 显示其中的图片：

<img src="assets/img/img.png" onerror="this.src='assets/img/default.png'"/>

当图片 img.png 未找到时，会默认显示 default.png，但若是默认图片也没找到，会引起崩溃，所以写成以下形式，这样当默认图也没找到时便会显示裂图图标了：

<img src="assets/img/img.png" onerror="this.onerror='';this.src='assets/img/default.png'"/>

在 VUE 中可以写为：

<div>
     <img :src="pic" :onerror="img404">
</div>

<script>
    export default {
        data () {
            return {
                pic: "XXX.png",
                img404: "this.onerror='';this.src='" + require('default.png') + "'"
    　　 }
    }
</script>