设置img标签的默认图片

img标签的属性有：

src：图片路径

width：宽度

height：高度

title：鼠标悬停在图片时显示的文字内容

alt ：用来告诉浏览器当需要显示的图片找不到时显示的内容

当src中的资源不存在或无法正常访问时，需要显示默认图片“default.png”。但是当onerror中设置的图片路径也不存在时就会导致浏览器一直加载这个图片资源，造成堆栈溢出错误。为了完善我们通常在后面加上this.οnerrοr=null;保证onerror里的事件只执行一次，如下：

// 设置默认图片
<img src="http://res.spreadwin.com/gmc38PE.jpg" alt="" onerror="this.src='images/default.png';this.onerror=null">

如果我们在vue项目同样这么设置，会发现无效（默认图片不显示）。原因是webpack打包时找不到资源文件，需要用到下面的方法。


// 内容
<img :src="item.url" alt="" :onerror="defaultImg">// js
export default {...computed: {defaultImg () {return 'this.src="' + require('images/default.png') + '"';}}

设置img标签的默认图片相关推荐

vue项目设置img标签的默认图片
方法一: 首先看看以前(非vue)项目是怎么设置img标签的默认图片: // 设置默认图片 <img src="http://res.spreadwin.com/gmc38PE.jpg ...
img标签使用默认图片的一种方式
基于html5提供的onerror这个时间属性. 写法如下 <img src="图片地址" οnerrοr="javascript:this.src=\'默认的图片 ...
设置video标签的默认样式
多媒体事件(Media Events) 通过视频(videos),图像(images)或者音频(audio) 触发该事件,多应用于HTML媒体元素比如 <audio>, <embed ...
img 标签 / div 背景图片默认图片裂图替代
img 标签中用默认图片代替没有准备图片的情况及用默认图片代替裂图 < img :src= " list_data.activity.activityImg== '' ? '/stat ...
图片img标签设置默认图片
图片img标签设置默认图片 1.让图片元素隐藏 2.设置默认图用户头像,默认商品图等.img的alt属性只是给图片设置未加载时的文字提示信息.这时,通常会用到onerror属性,一下为常用的两种方法 ...
前端判断img图片未能正确加载时显示一个默认图片。img标签onerror事件设置了本地默认图片还是不显示的问题
前端img标签中引用后端交给的图片地址时,有可能这个路径下图片被删除或者损坏了,那么页面在加载img图片时就显示为,太丑了. img标签有个onerror事件,就是当图片未被正确加载的时候调用此事件, ...
img标签设置默认图片
场景: 当获取图片路径或读取不到图片时,显示一张默认图片代替默认当图片碎片. 解决方法: 利用img标签的onerror事件. 问题:如果defaultIcon 也不存在,则会继续触发 onerror ...
img标签无图片或者图片url错误时显示默认图片
img标签无图片或者图片url错误时显示默认图片如上图,四个img标签中插入四张图片. 核心:οnerrοr="this.src='默认图片路径' " 当img标签src路径错误 ...
html 如何设置选择图片,html中如何设置默认图片？
前言大家可能都知道img标签是怎么设置默认图片的,但是你知道background-img是如何设置默认图片的嘛? img 这里是应用了img标签的``事件,当加载失败就用默认图片地址.但是这里可能出 ...

设置img标签的默认图片

img标签的属性有：

设置img标签的默认图片相关推荐

最新文章

热门文章