<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. 打印机出现错误0x00000709要如何解决

    就是微软2021年10月更新的这个补丁导致的 要卸载KB5006670. 原文:https://www.zhihu.com/question/298855357/answer/514515054 微软 ...

  2. 循环读取mysql表，合并后去重获取行数

    sdt=`date -d"$(date -d'20210108 ' +'%Y%m01')" +"%Y%m%d"`edt=`date -d "$(dat ...

  3. 【攻防世界】web练习区write up

    目录: view_source robots backup cookie disabled button weak auth simple php xff referer webshell get p ...

  4. Cmakelist如何添加自己的组件

    在components文件夹下添加各组件的CMakeList,其中可以设置的变量如下: COMPONENT_SRCS:要编译进当前组件的源文件的路径,推荐使用此方法向构建系统中添加源文件.COMPON ...

  5. Leftpad事件 我们是不是早已忘记该如何好好地编程？

    多年前的Leftpad 撤包事件使得React . Babel 和许多流行的npm模块都受到波及,无法正常运行. 这些受到影响的模块都引入了一个叫做 left-pad 的模块. 以下就是这十一行代码: ...

  6. Weak Encryption 弱加密安全问题处理

    Weak Encryption Abstract 程序使用了弱加密算法,无法保证敏感数据的保密性. Explanation 陈旧的加密算法(如 DES)再也不能为敏感数据提供足够的保护了. 加密算法依 ...

  7. 通过 poe 免费使用ChatGPT、GPT-4

    poe 是由美版知乎 Quora 构建的AI 产品,提供实时在线与多个AI 机器人交流.Quora 于去年 12 月首次推出Poe 作为封闭测试版,并于2月份向所有 iOS 用户开放.支持 web 端 ...

  8. IDEA配置JDK版本的地方, 适用于Compilation failed: internal java compiler error

    错误原因: 1. 编译版本不匹配 2.当前项目jdk版本不支持 解决方法 查看项目的jdk 查看工程的jdk 查看java编译器版本 讲这些改成自己需要的版本, 一般就可以解决编译版本出现的错误

  9. swiper.js Bscroll 轮播

    <!-- 轮播banner图 --> <div class="banner"> <div class="swiper-container&q ...

  10. Junit环境配置和在IDEA中使用Junit学习记录

    Junit环境配置 步骤1:检查电脑中Java环境是否配置成功 因为JUnit 是 Java 的一个框架,所以最根本的需要是在你的机器里装有 JDK. 1.1 进入cmd控制台界面,输入java/ja ...