img图片不存在显示默认图

红太狼 2021-03-18 13:54 755阅读 0赞

在项目中，我们使用img标签加载图片，有时候图片地址有可能失效，获取路径问题，导致图片加载失败，img标签就会显示alt内容。这时候用户体验不是很好，所以就需要显示一张默认图片。

**第一种方式：使用jquery_lazyload插件实现图片懒加载。只需要在src中写上默认图片地址即可。**
````
　　<img class="lazy" src="/static/images/dlb.jpg" data-original="{ { item.get('CoverUrl') }}" alt="{ {item.get('Name')}}" rel="nofollow">
````
*　　[jquery_lazyload使用方法链接。][jquery_lazyload]*

***第二种方式：在img标签上写 onerror 方法。***
````
    　　<img src="http://pic0.iqiyipic.com/image/20180619/0f/da/v_114905674_m_601_m6_180_236.jpg" height="380px" width="200px"
         οnerrοr="this.src='https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=ee323c6c71cf3bc7e855c5eae1309699/3801213fb80e7becdddcc3802e2eb9389b506b49.jpg'">
````

![1145331-20190129112536077-294316179.png][]

**第三种方式：在js中写（只要当前页面img标签图片加载出错，就会给赋值默认图片地址）**

$('.img').each(function () {
       
        if (!this.complete || typeof this.naturalWidth === "undefined" || this.naturalWidth === 0) {
       
            this.src = "https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=ee323c6c71cf3bc7e855c5eae1309699/3801213fb80e7becdddcc3802e2eb9389b506b49.jpg";

}
    });

[jquery_lazyload]: http://www.jq22.com/jquery-info390
[1145331-20190129112536077-294316179.png]: /images/20210318/1616075465254.png

发表评论取消回复

表情：

评论列表（有 0 条评论，755人围观）

还没有评论，来说两句吧...

相关阅读

相关 img标签的onerror事件来显示默认图片

有时，img标签中的src图片加载失败，原来的位置会加载一个碎片化图标。怎样可以设置一个加载失败时的默认显示图片那？ <img width="50px" name

￡神魔★判官ぃ/ 2023年10月18日 00:48/ 0 赞/ 29 阅读

相关 img onerror 图片加载失败显示默认图

img onerror 图片加载失败显示默认图  <img src="images/logo.png" onerror="javasc

深藏阁楼爱情的钟/ 2023年01月23日 09:53/ 0 赞/ 247 阅读

相关 img路径有效图片不显示问题

图片链接在地址栏请求可以显示,但是IMG标签的SRC不显示 ① `<meta name="referrer" content="no-referrer">` 在index.h

系统管理员/ 2023年01月03日 04:23/ 0 赞/ 559 阅读

相关图片显示不出时显示默认图片

本示例为uniapp框架的，在h5或者小程序都适用，实现代码： <image :src="imgUrl" @error="this.$util.commonImgE

深碍√TFBOYSˉ_/ 2023年01月02日 04:23/ 0 赞/ 382 阅读

相关 img图片不显示时设置默认图片

img标签显示图片： <img src="url" alt="error txt" /> 当图片地址错误时，就是显示error txt，为了更好的用户体验，通常我们

蔚落/ 2022年12月23日 06:45/ 0 赞/ 352 阅读

相关 vue img标签显示默认图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

╰+哭是因爲堅強的太久メ/ 2022年11月15日 11:55/ 0 赞/ 338 阅读

相关 js处理img标签加载图片失败，显示默认图片

1.第一种方法：如果已经引入了jquery插件，就很好办。没有的话，如果实在需要，可以附上代码： script(type='text/javascript',

Myth丶恋晨/ 2022年08月20日 13:25/ 0 赞/ 588 阅读

相关 img图片不存在时设置默认图片

例如，有以下代码： \[html\] [view plain][] [copy][view plain] 1. <img src="图片的url地址" alt="图片

浅浅的花香味﹌/ 2022年06月04日 00:35/ 0 赞/ 408 阅读

相关 img 显示默认图片,及动态赋值

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.onerror=null"/>

我会带着你远行/ 2021年09月23日 07:52/ 0 赞/ 380 阅读

相关 img图片不存在显示默认图

在项目中，我们使用img标签加载图片，有时候图片地址有可能失效，获取路径问题，导致图片加载失败，img标签就会显示alt内容。这时候用户体验不是很好，所以就需要显示一张默...

红太狼/ 2021年03月18日 13:54/ 0 赞/ 756 阅读