img图片不存在显示默认图

更新日期: 2019-01-30阅读量: 2763标签: 图片

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


第一种方式:使用jquery_lazyload插件实现图片懒加载。只需要在src中写上默认图片地址即可。

<img src="/static/images/dlb.jpg" data-original="{{ item.get('CoverUrl') }}" alt="{{item.get('Name')}}" rel="nofollow">


第二种方式:在img标签上写 onerror 方法。

<img src="http://pic0.iqiyipic.com/image/20180619/0f/da/v_114905674_m_601_m6_180_236.jpg" height="380px" width="200px"
     onerror="this.src='https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=ee323c6c71cf3bc7e855c5eae1309699/3801213fb80e7becdddcc3802e2eb9389b506b49.jpg'">


第三种方式:在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";
    }
});


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1908

css怎么让背景图片平铺?

平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景。采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺。

谈谈 Web 图片浏览体验与优化

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

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

如果已经引入了jquery插件,就很好办。没有的话,如果实在需要,可以附上代码,如果img标签是少量的话,可以用这个 img的onerror事件:

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

前端Js图片压缩

实现思路:获取input的file;使用fileReader() 将图片转为base64;使用canvas读取base64 并降低分辨率;把canvas数据转成blob对象;把blob对象转file对象;完成压缩

浅探前端图片优化

性能优化是前端开发必不可少的一环,而图片优化又是性能优化中必不可少的一环,但不知道有多少开发者在网页的开发过程中会注意图片的使用,图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题,这篇文章将会将我以往对图片的处理做个总结

JS 获取图片宽高

一般用于审核后台,比如说要求图片在一定区间内才能加精。也用于在 canvas 中裁图时计算缩放比例。方案为获取 naturalWidth。那么 naturalWidth 和 width 有什么不同?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!