在项目中经常会遇到图片加载失败需要显示默认图片的场景，那么如何在图片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 (plete == 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('默认的图片路径')}}
