vue2-判断本地图片是否存在

星星chok

已于 2024-07-26 16:12:12 修改

阅读量2.5k

点赞数

文章标签： vue.js 前端 html5

于 2020-11-10 19:11:24 首次发布

本文链接：https://blog.csdn.net/qq_38985444/article/details/108636501

版权

本文介绍在Vue中如何判断一张图片是否真的存在于服务器上，通过优雅的处理方式避免加载不存在图片导致的错误。

摘要由CSDN通过智能技术生成

思路：js生成图片，通过Promise catch捕获到图片异常，失败给默认图片路径。

//方法
// 判断图片是否存在
    checkImgExists(item) {
      return new Promise(function(resolve, reject) {
        var ImgObj = new Image() //生成图片
        let path= "images/" //图片路径
        ImgObj.src = require(`@/${path}${item}.png`)
        //捕获异常
        ImgObj.onerror = function(err) {
          reject(err)
        }
        // 成功 return路径
        ImgObj.onload = function() {
          resolve(ImgObj.src)
        }
      })
 //使用举例
 	data.forEach(item => {
      item.icon = item.appName //图片路径赋值
       checkImgExists(item.icon).catch(() => {
         item.icon = "default.png" //catch捕获异常,异常时设置默认图片
       })
     })

可以整个整个组件，例子如下

<template>
  <img :src="src" />
</template>

<script>
export default {
  props: {
    // 图片名称
    imgName: String,
    //图片文件夹地址
    setUrl: String,
    //默认图片
    defalultUrl: String,
  },
  data() {
    return { src: "" }
  },
  watch: {
    imgName: {
      handler() {
        this.getImgSrc() // 获取图片路径
      },
      immediate: true
    }
  },
  methods: {
    // 获取图片路径
    getImgSrc() {
      this.$utils
        .checkImgExists(this.imgName, this.setUrl)
        .then(src => {
          //成功 赋值路径
          this.src = src
        })
        .catch(() => {
          // 失败 给默认图片
          this.src = require(`@/${defalultUrl}.png`)
        })
    },
    // 判断图片是否存在
    checkImgExists(item) {
      return new Promise(function(resolve, reject) {
        var ImgObj = new Image() //生成图片
        let path= "images/" //图片路径
        ImgObj.src = require(`@/${path}${item}.png`)
        //捕获异常
        ImgObj.onerror = function(err) {
          reject(err)
        }
        // 成功 return路径
        ImgObj.onload = function() {
          resolve(ImgObj.src)
        }
      })
    }
  }
}
</script>