<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. 使用ActiveMQ中遇到的端口占用问题

    原Linux虚拟机中安装了ActiveMQ,EMQX.后期使用中主要使用EMQX来实现消息服务,停止了ActiveMQ.但是虚拟机挂起之后,长时间未再使用.近期由于有使用ActiveMQ的需要,而临时 ...

  2. Swagger-ApiOperation-value属性

    1.value属性设置 @ApiOperation(value="${province}.getUsers", notes="描述") Documentatio ...

  3. Codeforces Round #857 Div.1/Div.2 CF1801/1802 2A~2F 题解

    点我看题(Div2) Div 2A. Likes 如果要赞最多,肯定是先放所有的点赞,再放所有移除的操作.如果要最少,那就先把赞分成两种:最后被移除的和没被移除的:最后先放所有被移除的,放一个移除一个 ...

  4. Linux shell usage()使用说明

    usage()类似于执行文件-help展示的内容,即告诉使用者有哪些参数选项可供使用. usage()格式 点击查看代码 #!/bin/bash usage() { echo "Usage: ...

  5. maui BlazorWebView+本地html (vue、uniapp等都可以) 接入支付宝sdk 进行支付宝支付 开发 Android app

    首先添加支付宝sdk的绑定库 nuget 包:Chi.MauiBinding.Android.AliPay 项目地址:https://github.com/realZhangChi/MauiBindi ...

  6. day09-拦截器&文件上传

    拦截器&文件上传 1.拦截器-Interceptor 1.1拦截器概念 拦截器 拦截器(Interceptor):是一种动态拦截方法调用的机制,在SpringMVC中动态拦截控制器方法的执行. ...

  7. 【责任链设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

    简介 责任链模式(Chain of Responsibility Pattern)是一种行为型设计模式,也叫职责链模式.命令链模式.这种模式为请求创建了一个接收者对象的链,允许你将请求沿着处理者链进行 ...

  8. GPT接入企微应用 - 让工作快乐起来

    引子 最近最火的莫过于ChatGPT了,在自己体验后就想着如何其他同事也能方便的起起来,毕竟独乐乐不如众乐乐,自己注册又是V-P-N,又是国外手机验证,对于大部分同事来说门槛还是高的.现在也有不少小程 ...

  9. 强大的 apt-get 命令

    强大的 apt-get 命令(小结) 一.ubuntu下管理软件最方便的非 apt-get 工具莫属了,它的常见用法稍微整理一下供以后参考(详细见 man apt-get ): 1.更新源,升级软件和 ...

  10. 手写Mybatis代码实现会出现的问题

    实现自定义框架过程中遇到的问题及解决方案: 1.执行 Resources.class.getClassLoader().getResourceAsStream(path) 方法无法获得去字节输入流 解 ...