js当图片返回404时如何展示默认图片

在做项目时遇到一个问题,当图片返回失败时,例如404的情况,不能正常的显示,刚开始是用vue.js做的,部分代码如下

<dt> <img v-bind:src="getHeadPic(user.headPic)"  alt=""></dt>
methods:{
        getHeadPic:function(headPic){
        if(headPic != null && headPic != undefined && headPic != ‘‘){
            return headPic ;
        }
            return "http://woxin2.jx139.com/cztx/images/ic_default_head.png";
        }

通过vue.js动态绑定的方法,返回默认的头像,这种情况只考虑到headPic 为 null 、undefined、 ”‘‘的这三种情况,而没有考虑到返回的地址为404的情况,通过上网查资料得知,

img自身就带有 onerror属性,可以监控到图片是否加载失败的情况,于是乎,将代码调整如下

<img v-bind:src="getHeadPic(user.headPic)"  onerror="this.onerror=null; this.src=‘http://woxin2.jx139.com/cztx/images/ic_default_head.png‘">

至此,问题完美解决!

时间: 2024-11-10 18:58:00

js当图片返回404时如何展示默认图片的相关文章

图片在浏览器窗口水平居中展示(图片尺寸不限制)

闲言碎语不多说,直接上代码,转载请备注来源地,代码自己看自己悟. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片在浏览器窗口水平居中展示(图片尺寸不限制)</title> <style> * { margin: 0; padding: 0; background: #606060 } html { height: 100%

小程序---图片加载出错时,显示默认图片

在读取类似新闻列表等功能时,一般都会有图片,有时会因为数据问题,图片会加载不出来,此时,为了更好的用户体验, 我们应当在图片数据出错时,用默认的图片代替它. html5有对应的img事件:onerror 下面是小程序里的一个demo,事件是binderror: <block wx:for="{{list}}"> <image class='news-img' src="{{item.imgSrc}}" binderror='imageError'

js解决img标签加载失败显示默认图片

问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加载默认图片. $(function(){ //注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件 $("img").attr("onerror","this.src='img/error.jpg;this.onerror=null;'&

【js笔记】替换页面未加载默认图片

<script type="text/javascript"> var imgs = document.images; for(var i = 0;i < imgs.length;i++){ imgs[i].onerror = function(){ this.src = "/Cgowl/web/img/sucai2.jpg"; } } </script>

网页图片加载失败,用默认图片替换

$(function () { $('img').each(function () { $(this).bind('load', function () { $.Deferred().resolve(); }).bind('error', function () { //图片加载错误,加入错误处理 // dfd.resolve(); alert('error'); }) }) }) HTML代码 <body> <img src="/images/01.png" /&g

ssi include返回404页面

项目中index.html中包含<!--#include virtual="/commonfrag/djdzkan/recomm_www_info.inc"  --> ,当recomm_www_info.inc不存在返回404时.nginx会将404整个页面都反馈到index.html中,导致html中有两个body标签. 在include标签中添加 stub="file_not_found" 能解决此问题. 即:<!--#include virt

JS实现有点炫的图片展示效果-图片解体和组合

经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://runjs.cn/detail/tl9quyke查看源码http://runjs.cn/code/tl9quyke HTML : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

ajax返回json时,js获取类型,是字符串类型

ajax向php服务端请求,并返回json串给前端. js发现得到的返回值的类型是字符串,不能直接取json对象属性,需要JSON.parse(). 怎么解决呢? 这需要在php返回json时,加上一个header(),告知js,我这个返回的是Content-Type是json.这样js获取的就是json对象类型了. header('Content-Type: application/json; charset=utf-8'); 当返回的是字符串类型时,有可能Content-Type:text/

JS返回页面时自动回滚到历史浏览位置

在网上查阅资料时,看到的方案有很多,众说纷纭,但真正给出可行可用代码的寥寥无几,所以我干脆自己用SessionStorage写了一个缓存页面的方法,在离开页面时将需要缓存的容器中所有内容都存到SessionStorage中,在返回页面时重新加载 代码不多 下面贴出代码: 加入这行代码监听 2: 之后读取存取到的offsetTop位置: 原文地址:https://www.cnblogs.com/linglansen/p/9814914.html