博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
img图片不存在显示默认图
阅读量:6145 次
发布时间:2019-06-21

本文共 722 字,大约阅读时间需要 2 分钟。

在项目中,我们使用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">

  

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

  

  

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

转载于:https://www.cnblogs.com/wendj/p/10333280.html

你可能感兴趣的文章
Django之FBV与CBV
查看>>
Vue之项目搭建
查看>>
app内部H5测试点总结
查看>>
[TC13761]Mutalisk
查看>>
Data Wrangling文摘:Non-tidy-data
查看>>
while()
查看>>
常用限制input的方法
查看>>
IIS7下使用urlrewriter.dll配置
查看>>
并行程序设计学习心得1——并行计算机存储
查看>>
JAVA入门到精通-第86讲-半双工/全双工
查看>>
bulk
查看>>
js document.activeElement 获得焦点的元素
查看>>
C++ 迭代器运算
查看>>
【支持iOS11】UITableView左滑删除自定义 - 实现多选项并使用自定义图片
查看>>
day6-if,while,for的快速掌握
查看>>
JavaWeb学习笔记(十四)--JSP语法
查看>>
【算法笔记】多线程斐波那契数列
查看>>
java8函数式编程实例
查看>>
jqgrid滚动条宽度/列显示不全问题
查看>>
在mac OS10.10下安装 cocoapods遇到的一些问题
查看>>