vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢?
方法一:onerror
<img src="原来要加载的资源" onerror="默认的图片路径"/>
在vue项目中前面需要加个bind
:
<img :src="imgSource" :onerror="default"/>
data(){return{imgSource:require('图片路径')default:'this.src="'+require('默认的图片路径')+'"'}
}
但是有时候显示不出来默认图片,这个时候需要稍微修改下:
<img :src="imgSource?imgSource:'' " :onerror="default"/>
这样就可以在src资源加载失败显示出默认的图片
方法二: 使用自定义指令
自定义指令defaultImg.js:
function install(Vue, options = {}) {/*** 检测图片是否存在* @param url*/let imageIsExist = function (url) {return new Promise((resolve) => {var img = new Image();img.onload = function () {if (this.complete == true) {resolve(true);img = null;}}img.onerror = function () {resolve(false);img = null;}img.src = url;})}Vue.directive(options.name || 'default-img', async function (el, binding) {//指令名称为:v-default-imgconst imgURL = el.src;//获取图片地址const defaultURL = binding.value;if (imgURL) {const exist = await imageIsExist(imgURL);if (exist) {el.setAttribute('src', imgURL);} else {el.setAttribute('src', defaultURL);}} else {el.setAttribute('src', defaultURL);}})}export default { install };
在main.js使用自定义指令:
import defaultImg from './directives/defaultImg';
Vue.use(defaultImg);
在vue项目中使用:
<img :src="imgSource" v-default-img="default"/>
data(){return{imgSource:require('图片路径')default:require('默认的图片路径')}
}
vue解决图片加载失败显示默认图片的方法相关推荐
- 前端页面图片加载失败显示默认图片
方法有多种: 1.首先说我用的,看代码 //页面图片加载失败时 默认显示统一处理 document.addEventListener("error", function (e) { ...
- 图片加载失败显示默认图片
在页面加载的图片的时候,如果图片不存在或者路径不存在,页面加载图片就会如下图所示. 解决方法: 在img 标签中添加一下标签 onerror="onerror=null;src='img/a ...
- vue图片加载失败使用默认图片,el-image支持懒加载,自定义占位、加载失败等
<template><d2-container><h3>image加载失败使用默认图片</h3><img src=""alt= ...
- img加载中显示loading,加载失败显示默认图片(React)
实现效果 完整代码 import { useRef, useState } from 'react'; import './index.less'; import errorImg from '@/c ...
- 图片加载失败或默认图片
直接上马 $('img').each(function(k,i) {if($('img').eq(k).height()<200){if (!this.complete || typeof th ...
- img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
- img图片加载失败选择默认替换图片
一般我们需要加载图片的有两种: 1.img 标签直接通过src引用图片地址 img标签的话,可以通过img自带属性onerror 写一个js进行控制,当图片加载失败后触发onerror <img ...
- htmlimg图片加载失败_js针对图片加载失败的处理方法分析
本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解 ...
- htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言 一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...
最新文章
- r roc函数_R语言画ROC曲线总结
- wamp测试mysql_Wamp 配置及测试
- html5在li中添加按钮,如何在html5blank_nav()中的ul和li中添加类?
- leetcode-187-重复的DNA序列
- NAS实现类型对比:统一式、网关式和横向扩展式(Scale-out)
- 使用python的笔记
- IPv4地址何去何从 IPv6不向下兼容的尴尬
- 局域网共享设置软件_新页软件:如何设置局域网模式
- MPAndroidChart 2.15使用记录
- Keil uVision4 C51完整版
- 解析函数的孤立奇点-复变函数
- 如何定向网件路由防火墙与URL
- [计算机网络-03] 数据链路层
- 微信小程序页面静态页是html,制作一个微信小程序中的静态页面
- 如何在 SAP UI5 应用里显示 PDF 文件试读版
- java读取qq邮箱_通过java给qq邮箱发送信息
- swagger2 description is deprecated
- Java数组之一维数值数组之数据去重
- 信息泄露事件频发,下一个会是谁?
- 量化投资 — 移动平均及双均线策略