vue图片加载（默认图、小图、加载图、大图、加载失败图）

玖柒的小窝

修改于 2021-11-01 11:07:17

3.5K0

修改于 2021-11-01 11:07:17

背景

在使用图片的时候，如果不出意外，几乎都是直接使用<img src='../images/xxxx' />去渲染图片。但是对于一些特殊场景就需要对图片特殊处理，比如：默认图、大小图、加载图等。

在此介绍一下图片处理涉及到的情况：图片使用阿里云OSS图片，里面有涉及到对原图（会大于20兆）处理为小图，但是阿里云最大只支持20兆的图片进行处理，因此有些图片无法使用小图；如果对那部分图片直接使用原图会对性能有很大影响（特别是网速慢的情况下），比如：初始化图片渲染缓慢，界面卡死无法滚动等情况。

为了解决上述问题，如果小图可以加载，则直接使用小图，如果小图不能加载，则先使用加载中的图片去渲染，当原图加载成功以后，渲染上对应的原图，如果当原图也渲染失败（比如服务器响应客户端最大时间为30秒，网速过慢导致该时间内未完成），则使用加载失败的图片

代码实现

一、首先针对上述情况准备好对应的图片信息（demo中自己又找的其他图片代替OSS图片），代码如下：

data() {
    return {
      imglist: [
        {
          text: "使用小图地址", // 以下地址全部正常
          small: "https://xixixi.net.cn/resources/images/small.png",
          loading: "https://xixixi.net.cn/resources/images/loading.png",
          big: "https://xixixi.net.cn/resources/images/big.jpg",
          error: "https://xixixi.net.cn/resources/images/error.png",
        },
        {
          text: "使用大图地址", // 小图加载失败，会先使用loading图片占位，避免页面卡顿，等待大图加载完成使用大图
          small: "https://xixixi.net.cn/resources/images/small_err.png",
          loading: "https://xixixi.net.cn/resources/images/loading.png",
          big: "https://xixixi.net.cn/resources/images/big.jpg",
          error: "https://xixixi.net.cn/resources/images/error.png",
        },
        {
          text: "使用加载失败图片", // 小图和大图地址都加载失败，会使用加载失败图片
          small: "https://xixixi.net.cn/resources/images/small_err.png",
          loading: "https://xixixi.net.cn/resources/images/imagesloading.png",
          big: "https://xixixi.net.cn/resources/images/big_err.jpg",
          error: "https://xixixi.net.cn/resources/images/error.png",
        },
      ],
    };
  },
复制代码

二、定义v-img-format指令接收的图片信息：其中v-img-format内是小图的图片地址，:loading是加载中的图片地址，:big是大图的图片地址，:error是图片加载失败的图片地址。

<span class="img-box" v-for="(item, index) in imglist" :key="index">
  <img
    v-img-format="item.small"
    :loading="item.loading"
    :big="item.big"
    :error="item.error"
  />
  {{ item.text }}
</span>
复制代码

三、定义imgFormat指令

// demo.vue
import imgFormat from "@/utils/imgFormat.js";

export default {
  name: "demo",
  directives: {
    imgFormat: imgFormat,
  },
};
复制代码

// imgFormat.js
const handleImg = function({smallImg, bigImg}) {
    return new Promise((resolve, reject) => {
        let image = new Image()
        image.src = smallImg
        image.onload = function() {
            if (this.complete === true) {
                resolve(smallImg) // 3.小图可以使用时返回小图地址
            }
        }
        image.onerror = function() {
            let  bigImage = new Image()
            bigImage.src = bigImg
            bigImage.onload = function(){
                if (this.complete === true) {
                    resolve(bigImg) // 4.小图不可以使用，大图可以使用时返回大图地址
                }
            }
            bigImage.onerror = function() {
                if (this.complete === true) {
                    reject() // 5.大小图都不可以使用时
                }
            }
        }
        
    })
}

export default function(el, binding) {
    let defaultImg = require('@/assets/default.jpg') // 默认图片
    let smallImg = binding.value  // 小图片
    let loadingImg = el.getAttribute('loading') // 加载中图片
    let bigImg = el.getAttribute('big') // 大图片
    let errorImg = el.getAttribute('error') // 加载失败图片
    el.setAttribute('src', loadingImg || defaultImg) // 1.先给该图片设置加载中或者默认图片

    handleImg({smallImg, bigImg}) // 2.根据图片信息进行处理
        .then((res) => {
            el.setAttribute('src', res)  // 6.使用小图或者大图渲染界面
        })
        .catch(() => {
            el.setAttribute('src', errorImg ) // 7.大小图都加载失败时使用errorImg回显
        })
}
复制代码

下面是该demo使用后的效果：