vue img src 失败默认图片

vue当图片加载失败时，用一个默认图片替换；

原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性这样默认图片就设置好了: 这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高: 像后台管理系统中,如果是这样或者是有一个默认封面的话,会感觉很舒服:

JQuery图片加载显示loading和加载失败默认图片

在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class="container"> <div class="row block" id="img-list"> <div class="col-md-3"> <img src="/Assets/On

img图片加载失败默认图片

vue中img图片加载中以及加载失败显示默认图片问题

加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" v-for="(item, index) in picData" :key="index"> <img :src="imgSrc" :onload="loadImg(item.url)" /></div&g

vue中的图片加载与显示默认图片

HTML: <div class="content-show-img"> <div class="show-img"> <img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg"> </div> </div>

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

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

Jquery判断页面图片是否加载失败,加载失败则显示默认图片

例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> &l

js处理img标签加载图片失败，显示默认图片

1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js") //这是jade文件的写法,可以自行转换为html handle error $('img').error(function(){ $(this).attr('src', "d

JS图片加载失败用默认图片代替

1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. function imgOnerror(img){ img.src="../images/avatars/default.jpg"; img.onerror=null;//控制不要一直跳动 } <img width="90" height="120&qu

vue自定义指令默认图片

/** * 检测图片是否存在 * @param url */ function imageIsExist(url) { return new Promise((resolve) => { var img = new Image(); img.onload = function () { if (this.complete == true){ resolve(true);

vue的 v-for 循环中图片加载路径问题

先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

加载默认图片，如何避免img标签陷入onerror事件死循环

当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件后,置于onerror=null 来清除onerror事件,参考代码如下: <img src="http://127.0.0.1:8088/images/avatar_50x50.gif" onerror="this.onerror=null;this.src='http:

img如果没有图片显示默认图片效果

img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" />其实就是说,在这个img的行为失败(onerror)的时候,调用javascript:this.src="URL"来给这个img标签重新指定src属性,从而达到显示备用图片的效果.

图片onerror事件，为图片加载指定默认图片

为图片指定加载失败时显示默认图片,js输出的img对象,onerror是事件,不是属性,所以这样写是不起作用的: var img = $(document.createElement("IMG")); img.attr({ "src": imgs[idx], "alt": tips[idx], "onerror":"this.src='" + NoPi

vue quill使用&quill 自定义图片上传&自定义mp4 更换标签

pluins 创建quill 目录创建文件video.js import { Quill } from 'vue-quill-editor' // 源码中是import直接倒入,这里要用Quill.import引入 const BlockEmbed = Quill.import('blots/block/embed') const Link = Quill.import('formats/link') const ATTRIBUTES = ['height', 'width'] class V

Vue项目打包后背景图片路径错误

vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改默认配置: env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/', 修改为: env

img标签使用默认图片的一种方式

基于html5提供的onerror这个时间属性.

img标签设置默认图片

为了美观当网页图片不存在时不显示叉叉图片当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了”图片XX”的提示信息,也起不了多大作用.其实,可以这样处理:当图片不存在的时候,会触发onerror事件,我们可以在该事件中做一下补救的工作,比如: 1.让这个图片元素隐藏: <img src="图片的url地址" alt="图片XX" onerror="this.style.di

微信小程序开发——设置默认图片、错误加载图片

小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something wrong'}. 网上查了下,没有什么好的解决方法,找了几个案例结果都没有实现想要的效果. 结合前边看过的案例,大部分都是采用修改数据源将错误图片替换为默认图片的,但是有好多代码都没贴全,以致不好理解. 下面就根据自己遇到的情况对图片为空.图片路径错误的情况进行了处理,相关代码如下,相关数据都有说明:

vue中的js引入图片，必须require进来

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: <el-carousel-item v-for="item in carouselData" :key="item.id">

vue img src 失败 默认图片

热门专题

vue img src 失败默认图片