应用场景

在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况。提供以下解决方案

解决方案

在 img 标签 加上onerror="onerror=null;src='123.jpg'" ,即当图片加载失败时会自动加载123.jpg ,例如

<img src="abc.jpg" onerror="onerror=null;src='123.jpg'" />

<img> 标签 图片加载失败时候处理方案的更多相关文章

  1. img error 图片加载失败的最佳方案

    有时候, 当img的src加载失败, 会显示缺省碎片图片,  影响用户体验.  有一个js事件onerror就派上了用场. 它可以在加载失败时, 显示缺省的图片. 它有两种使用方式. 第一种: 使用纯 ...

  2. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  3. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

  4. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  5. css背景图片加载失败,页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  6. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  7. WebForm、MVC图片加载失败处理

    还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...

  8. JavaScript-onerror事件:图片加载失败后不显示

    HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...

  9. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

随机推荐

  1. Leaflet:控件Control相关

    Leaflet官方文档中只给出了4种控件:Zoom.Attribution.Layers.Scale:它们都是继承自Control类,具体可以参考Control. Control Zoom.Scale ...

  2. 国产化之虚拟ARM64-CPU安装银河麒麟操作系统

    背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟v4,CPU使用飞腾处理器.我本地没有这个国产的处理器,但飞腾是基于ARMv8架构的64位处理器,所以理论上基于这个CPU架构的硬件应 ...

  3. VirtualBox虚拟机--桥接模式

    问题概述:VirtualBox虚拟机设置桥接模式,与宿主机互相ping通. 注:如果按照以下方式设置了还是ping不通,查看虚拟机防火墙是否已关. 公司电脑拿去维修了,在自己家里电脑上部署项目开发环境 ...

  4. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  5. HCNP Routing&Switching之组播技术-组播分发

    前文我们了解了组播技术中的igmp-snooping相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15860484.html:今天我们来聊一聊组播技术 ...

  6. 【自动化基础】allure描述用例详细讲解及实战

    前言 allure可以输出非常精美的测试报告,也可以和pytest进行完美结合,不仅可以渲染页面,还可以控制用例的执行.下面就对allure的使用进行一个详细的介绍和总结. 需要准备的环境: pyth ...

  7. 顺序表的插入和删除(基于c语言)

    插入:在下标p处插入数据x:返回是否成功(0/1) 几个注意点:1.还能否插入数据:2.给的下标p是否是错误的以及p的范围:3.移动时的易错点(从下标大的元素开始):4.n与palist->n; ...

  8. C# 杂七杂八知识点

    本文源自在工作过程中一些比较容易混淆或者理解不太清晰的知识点进行整理备忘. sealed修饰符 当sealed关键字修饰类,该类不能被继承. 当sealed关键字修饰方法的时候,该方法不能在其子类中重 ...

  9. 软路由openwrt中替换国内镜像源(以阿里云为例)

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.打开openwrt终端 二.找到distfeeds.conf 进入opkg cd /etc/opkg 查看opkg内文件 ls 可以找到di ...

  10. 【SVN】Please execute the 'Cleanup' command.

    背景 项目有个新的bug,我需要提取一个新的分支,但是提取之后,更新分支出现了这个问题 Please execute the 'Cleanup' command. 原因 由于使用SVN更新文件出错,导 ...