<img :src="item.url? item.url: '' " alt :onerror="defaultImg" />

这里一定要判断src，不然接口返回url为null时，后面的onerror不生效

computed: {

    defaultImg () {

      return 'this.src="' + require('@/assets/img/default-img.png') + '"'

    }

  },

动态设置背景图

:style="{backgroundImage: 'url('+图片地址+')'}"

vue处理图片路径出问题时显示默认图片的更多相关文章

  1. JS检查当图片不存在时显示默认图片和键盘大小写键状态

    当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...

  2. vue判断图片为空或者图片加载不成功时显示默认图片

    纯css解决方案: <img src="broken.png" alt=""> img { position: relative; } img:af ...

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

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

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

    HTML: <div class="content-show-img"> <div class="show-img"> <img ...

  5. 在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片

    很多时候,在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片.可以通过以下方式: <img src="xxx.jpg" onError="th ...

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

    img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" ...

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

    加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...

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

    1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...

  9. img图片不存在时设置默认图片

    当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了"图片XX"的提示信息,也起不了多大作用. 其实,可 ...

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

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

随机推荐

  1. 英码科技边缘计算智慧工地解决方案——给工地戴上AI“安全帽”

    据统计显示,2021年全国共发生房屋市政工程生产安全事故734起,死亡840人:且近3年来,工地事故数量.死亡人数连续攀升.这不仅仅是一个普通的数字,每个数字都代表一个独特.鲜活的生命.为什么每年会发 ...

  2. Vue2使用axios，request.js和vue.config.js

    1.配置request.js,用来请求数据 import axios from 'axios' // 1:利用axios对象的方法create,创建一个axios实例 // 2:request就是ax ...

  3. 7. 基础增删改 - 使用Portal Webapi进行会员信息的增删改

    我们可以通过使用Portal Web API在Portal页面中跨所有Microsoft Dataverse表执行创建.更新和删除操作,下面我们就一起来看一下如何通过使用AJAX函数来进行操作. AJ ...

  4. Flask CURD(增删改查)

    1.创建flask项目 2.修改配置文件: ''' config.py 保存项目配置 ''' 导入Flask模块 from flask import Flask 额外安装: 数据库操作模块 from ...

  5. 发布订阅者模式 -- 简单的PubSub

    /** * 发布订阅者模式 * **/interface handle { [propName: string]: Function[]}class PubSub { private handles: ...

  6. 快速掌握Linux三剑客命令使用

    前言 Linux三剑客指的是grep.sed以及awk命令的使用,这三个命令功能异常强大,大到没朋友.grep命令主打"查找",sed命令主打"编辑",awk命 ...

  7. 基于 Agora SDK 实现 Windows 端的一对一视频通话（基于3.6.2版本）

    前提条件 Microsoft Visual Studio 2019 或以上版本 支持 Windows 7 或以上版本的 Windows 设备 有效的 Agora 账户(免费注册) 注:如果你的网络环境 ...

  8. STL常用容器用法总结

    vector 变长数组,倍增的思想 size() 返回元素个数 empty() 返回是否为空 clear() 清空 front()/back() push_back()/pop_back() begi ...

  9. JVM加载中初始化时机？什么时候不会进行初始化？

    初始化的过程是给静态变量赋予指定值以及执行静态代码块的过程. 当遇到new,getstatic,putstatic,invokestatic指令时要进行初始化,也就是new实例化对象,调用静态变量以及 ...

  10. DOM0级与DOM2级的区别

     1.DOM0级和DOM2级的共同优点:能添加多个事件处理程序,按顺序执行,HTML事件处理程序无法做到~2.关于dom0级和dom2级的区别DOM0级事件处理:同时绑定几个不同的事件,例如在绑定on ...