Vue 图片加载404处理方法及全局注册函数

傷城~ 2021-09-24 13:06 657阅读 0赞

#  Vue 图片加载异常处理 #

### 1.更换默认图片地址 ###

<img :src="imgUrl" @error="errorImg" />

1.修改event.srcElement 属性

errorImg(event) {
      let img = event.srcElement
      img.src = require('@/assets/img/noImg.png')
      img.onerror = null //防止一直跳动
    }

2. 修改event.target 属性

errorImg(event) {
      let img = event.target
      event.target.style.objectFit = 'contain' //保持图片尺寸不变
      img.src = require('@/assets/img/noImg.png')
      img.onerror = null //防止一直跳动
    }

### 2. 将图片标签html置空 ###

errorImg(event) {
          event.target.outerHTML = ''
        },

# 全局注册函数 #

暂时排除使用Vue.use注册函数的方式（多写一些繁琐的代码）

公共函数js

function errorImg(event) {
      let img = event.srcElement
      img.src = require('@/assets/img/noImg.png')
      img.onerror = null //防止一直跳动
    }
    
    export default {
      errorImg,
    }

main.js 引入

import pk from '@/public/public'
    Vue.prototype.$pk = pk

在组件中使用

<img :src="imgUrl" @error="errorImg" />

methods: {
        errorImg(event) {
          this.$pk.errorImg(event)
        },
      }

发表评论取消回复

表情：

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

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

相关阅读

相关 vue全局组件自动加载注册（重点）

全局组件自动加载注册（重点） > [官方文档][Link 1] > > 在src / components / 新建global文件夹；（这个路径与components

客官°小女子只卖身不卖艺/ 2023年03月12日 09:22/ 0 赞/ 24 阅读

相关 vue注册全局组件的方法

1、在components文件夹下新建package文件夹（文件夹可以随意命名），然后在package文件夹下创建index.js ![在这里插入图片描述][202001

谁借莪１个温暖的怀抱￠/ 2023年02月22日 13:55/ 0 赞/ 213 阅读

相关 vue项目注册全局方法

vue项目注册全局方法可使用$on和$root结合使用本案例是在App.vue中注册了一个全局方法 1，在App.vue中created()方法中注册一个方法

太过爱你忘了你带给我的痛/ 2022年12月30日 13:40/ 0 赞/ 196 阅读

相关 vue 全局封装loading加载(全局监听)

前言：为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。第一步：

红太狼/ 2022年12月07日 15:08/ 0 赞/ 246 阅读

相关 vue指令处理图片加载错误，判断图片可否加载成功

vue指令处理图片加载错误，判断图片可否加载成功 v-real-img 指令全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img

超、凢脫俗/ 2022年11月17日 13:47/ 0 赞/ 611 阅读

相关 vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。 ![Center][] 请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板

矫情吗；*/ 2022年06月09日 13:08/ 0 赞/ 470 阅读

相关 vue 图片懒加载

安装、引用、配置三部曲 1、安装\` npm install vue-lazyload --save-dev 2、在main.js中引用 impor

傷城~/ 2022年04月23日 12:02/ 0 赞/ 456 阅读

相关 vue + 图片加载 + 默认图片

需求：图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。解决：先判断返回数据是否有，再通过img 的 load事件判断是否加载完成

╰+哭是因爲堅強的太久メ/ 2022年03月10日 18:20/ 0 赞/ 471 阅读

相关 vue图片懒加载

介绍： vue-lazyload主要应用于图片延迟加载。包含如下的特点：小巧轻便，功能强大，易于使用可以用于加载任何图像类型支持Vue 1.0和Vue 2.0

缺乏、安全感/ 2021年12月07日 09:59/ 0 赞/ 676 阅读

相关 Vue 图片加载404处理方法及全局注册函数

Vue 图片加载异常处理 1.更换默认图片地址 <img :src="imgUrl" @error="errorImg" /> 1.修改event.s

傷城~/ 2021年09月24日 13:06/ 0 赞/ 658 阅读