<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. 2022.07.13 vue3下pinia的简单使用及持久化

    使用前说明: 当前demo使用了vue3 + vite + typescript + pinia搭建的简单项目,主要介绍了在单文件组件(sfc)基础上使用pinia的用法,懒得看api的兄弟们,来这瞅 ...

  2. app工程目录结构

    一.APP工程目录结构 APP工程分为两个层次,第一个层次是项目(这里在eclipse中是指workspace),另一个层次是模块(这里在eclipse中是指project) 模块依附于项目,每个项目 ...

  3. pytorch之科学计算

    一.简介 torch作为深度学习的主流框架,其根本在于1.具有强大的GPU加速的张量计算功能.2.包含自动求导系统的深度神经网络.自动求导功能由torch.Autograd模块实现,而科学计算部分则直 ...

  4. IntelliJ IDEA常用插件

    Mybatis Log Plugin安装好插件后,在Tools工具栏中可以看到安装好的插件,点击即可打开相应窗口,在Debug时,相应的Sql语句即可输出到此窗口,方便查看.此插件相当好用,提升开发效 ...

  5. MAC范洪攻击-macof

    macof 目的:攻击交换机的路由表,实现网络信息嗅探 macof是dsniff中的一个小工具 概要:交换机中存在着一个记录着MAC地址的表,为了完成数据的快速转发,这个表有着自动学习机制,学习后可以 ...

  6. .NET周报 【3月第2期 2023-03-12】

    国内文章 ASP.NET Core中如何限制响应发送速率(不是调用频率) https://www.cnblogs.com/coredx/p/17195492.html ASP.NET Core中有很多 ...

  7. 学习ASP.NET Core Blazor编程系列三十——JWT登录（4）

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  8. Eclipse安装和配置环境教程（图文详解）

    前言 在上一篇文章中,壹哥给大家介绍了Notepad++这个更高级点的记事本,它进行Java开发相比windows自带的记事本要更方便一些.但是即便如此,用这种记事本进行Java开发效率依然很低.如果 ...

  9. Spring Security 框架使用

    更多内容,前往IT-BLOG 一.Spring Security 简介 Spring Security 是一个能够为基于 Spring 的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供 ...

  10. API获取商品评论?

    前言 小伙伴们好,前两天因为个人原因耽误了内容的更新,在这里和所有的小伙伴道个歉,今天CC和大家唠唠商品评论的这个话题,大家在网上购物的决策会因为<商品评论的好坏>吗,相信绝大的一部分的小 ...