记,当找不到图片时,显示默认图片

<img src='error.jpg'/>

可以看上方当图片找不到的时候特别的丑,所以我们需要给他添加一个默认的图片,让界面看起来更加美观一点.怎么做呢?
我们看看控制台打印:这里报错了,没有找到该图片,这里我们可以知道,当图片没有找的时系统会抛出404的错误,所以说我们需要去监听它的错误事件(onerror),并且把他的src属性改为默认图片.

可以看到这张图片上

<img src='error.jpg' alt='未找到图片' onerror="this.src='默认图片路径'">

效果图:

但是当默认图片也找不到的时候,就会出现崩溃的情况:
这么解决问题呢,只需要改造一下:

<img src="error.png" onerror="this.οnerrοr='';this.src='默认图片路径'"/>

这个样子,就好了,哪怕默认图片找不到,也会出现图片裂开的图了;

记,当找不到图片时,显示默认图片相关推荐

jsp无图片时显示默认图片解决方案
页面图片节点内容如下: <img height="100" width="100" alt="预约客户1999抢购中,长虹LED42538ES, ...
当图片404时显示默认图片
当图片404时显示默认图片 1.当图片未找到时或者404时,触发onerror显示其中的图片 eg: <img src="当前图片的地址" onerror="thi ...
img标签无图片或者图片url错误时显示默认图片
img标签无图片或者图片url错误时显示默认图片如上图,四个img标签中插入四张图片. 核心:οnerrοr="this.src='默认图片路径' " 当img标签src路径错误 ...
htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...
微信小程序图片404时显示默认图片
由于在项目中多个页面都要用到这个代码,所以我们在utils文件夹中新建一个errorImage.js,便于在其他页面引用 errorImage.js: //远程图片no found情况下指引 func ...
vue 图片 404 显示默认图片
写在前: vue中循环显示图片,报错404,未加载图片的情况下可以使用默认图片使用线上图片: <img :src="oneurl" alt="图片" o ...
图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
img 图片加载错误时显示默认图片
有时我们项目里的图片加载错误时(比如 404),为了友好体验,我们可以用一张默认图片来替代. 方法一:用 background 遮住原图片 <img src="no-such-pic. ...
img图片加载错误时显示默认图片
JavaScript用的onerror事件,vue用的@error JavaScript写法 <img src="xxx" onerror="this.src='d ...
Glide4 加载失败时显示默认图片
// 根据URL的首字母创建一个DRAWABLE TextDrawable drawable = TextDrawable.builder().buildRoundRect(getUrlFirstLe ...

记,当找不到图片时,显示默认图片

记,当找不到图片时,显示默认图片相关推荐

最新文章

热门文章