使用vue自定义指令实现当图片加载失败时使用默认图

深藏阁楼爱情的钟 2023-02-20 06:54 15阅读 0赞

首先在入口文件main.js定义一个全局指令

//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
    Vue.directive('real-img', async function (el, binding) { //指令名称为：real-img
        let imgURL = binding.value;//获取图片地址
        if (imgURL) { 
            let exist = await imageIsExist(imgURL);
            if (exist) { 
                el.setAttribute('src', imgURL);
            } 
        }
    })
    //检测图片是否存在
    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;
        })
    }

然后使用的时候就特别方便了，因为是全局注册的，所以每个页面都可以直接使用

<img src="images/logoError.png" v-real-img="images/logo.png">

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3实现图片懒加载及自定义懒加载指令

Vue3实现图片懒加载及自定义懒加载指令前言 1.使用vue3-lazyload插件 2.自定义v-lazy懒加载指令 2.1 使用use

我会带着你远行/ 2023年10月14日 18:14/ 0 赞/ 103 阅读

相关 Vue3使用自定义指令实现图片懒加载技术

使用vue3的自定义指令和新的dom监听技术，监听元素是否在可视区域内，来实现图片的懒加载技术，使用录屏软件有问题，，所以实现的效果将就看吧： ![664d8913fdc84

深藏阁楼爱情的钟/ 2023年10月10日 18:41/ 0 赞/ 63 阅读

相关 vue项目中图片加载不到时，使用默认图片替换

vue项目中图片加载不到时，使用默认图片替换解决方法： ①使用三目运算符 ②使用onerror <img :src="item

我就是我/ 2023年07月24日 02:21/ 0 赞/ 49 阅读

相关使用vue自定义指令实现当图片加载失败时使用默认图

首先在入口文件main.js定义一个全局指令 //全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片

深藏阁楼爱情的钟/ 2023年02月20日 06:54/ 0 赞/ 16 阅读

相关 img onerror 图片加载失败显示默认图

img onerror 图片加载失败显示默认图  <img src="images/logo.png" onerror="javasc

深藏阁楼爱情的钟/ 2023年01月23日 09:53/ 0 赞/ 265 阅读

相关 nuxt服务端渲染 vue检测图片加载失败onerror时，自定义指令处理

nuxt服务端渲染 vue检测图片加载失败onerror时，自定义指令处理全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，

快来打我*/ 2022年11月15日 12:57/ 0 赞/ 150 阅读

相关 Vue自定义指令及实现图片懒加载指令

一. 速识概念：在我们使用 Vue 的过程中，遇到了很多方便我们操作的vue内置指令，以 v-xxx 表示。比如有 v-module，v-for，v-if，v-sh

朱雀/ 2022年09月12日 14:52/ 0 赞/ 482 阅读

相关当原图片加载失败时，如何让图片加载上我们默认给的图片

我们可能会遇到这样的问题，当页面中的图片的加载失败时，我们想要该图片加载我们给的默认的图片，我在这里分享一下几种做法，希望对大家有所帮助。 1、在img标签中加上 οnerr

曾经终败给现在/ 2022年06月17日 07:16/ 0 赞/ 324 阅读

相关 vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等

<template> <d2-container> <h3>image加载失败使用默认图片</h3> <img src=""

谁借莪１个温暖的怀抱￠/ 2021年07月26日 12:00/ 0 赞/ 2932 阅读

相关 Vue 自定义图片懒加载指令v-lazyload

Vue是可以自定义指令的，最近学习过程中遇见了一个需要图片懒加载的功能，最后参考了别人的代码和思路自己重新写了一遍。以下将详细介绍如何实现自定义指令v-lazyload。...

朱雀/ 2021年03月23日 12:52/ 0 赞/ 702 阅读