Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

background

To render the image. However, for some special scenarios, special processing of images is needed, such as default images, size images, loading images, etc.

Here we introduce the picture processing involved: the picture uses Ali cloud OSS picture, which involves processing the original picture (will be larger than 20 MB) into a small picture, but Ali cloud only supports the maximum 20 MB picture processing, so some pictures can not use small picture; If the original image is used for that part of the image, the performance will be greatly affected (especially in the case of slow network speed), such as: the initial image rendering is slow, the interface is stuck and cannot scroll, etc.

In order to solve the above problem, if can load picture, the direct use of insets, if cannot load, the picture is first used to render the picture to load and load when the original image after success, rendering the corresponding artwork, when the original image rendering failure (such as the maximum client server response time for 30 seconds, slow connections unfinished) in the time, The image that failed to load is used

Code implementation

First, prepare the corresponding picture information for the above situation (I find other pictures in the demo instead of OSS pictures), the code is as follows:

data() {
    return {
      imglist: [{text: "Use small map address".// All the following addresses are normal
          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: "Use the big picture address".// If loading a small image fails, loading an image will be used first to prevent the page from being jammed
          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: "Using load failure image".// Both small and large map addresses failed to load
          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",}]}; },Copy the code

2. Define the image information received by the V-img-format command: V-img-format is the address of a small image, :loading is the address of a loaded image, :big is the address of a large image, :error is the address of a failed image loading.

<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>
Copy the code

ImgFormat directive

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

export default {
  name: "demo".directives: {
    imgFormat: imgFormat,
  },
};
Copy the code
// 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. Returns the address of the small graph when it is available
            }
        }
        image.onerror = function() {
            let  bigImage = new Image()
            bigImage.src = bigImg
            bigImage.onload = function(){
                if (this.complete === true) {
                    resolve(bigImg) // 4. The small map cannot be used. If the large map can be used, return the address of the large map
                }
            }
            bigImage.onerror = function() {
                if (this.complete === true) {
                    reject() // 5. The size diagram cannot be used}}}})}export default function(el, binding) {
    let defaultImg = require('@/assets/default.jpg') // Default image
    let smallImg = binding.value  / / small pictures
    let loadingImg = el.getAttribute('loading') // Load the image
    let bigImg = el.getAttribute('big') / / the big picture
    let errorImg = el.getAttribute('error') // Failed to load the image
    el.setAttribute('src', loadingImg || defaultImg) // 1. Set the loading or default image for this image first

    handleImg({smallImg, bigImg}) // 2
        .then((res) = > {
            el.setAttribute('src', res)  // 6. Use small or large images to render the interface
        })
        .catch(() = > {
            el.setAttribute('src', errorImg ) // 7. Use errorImg to display information when loading the size diagram fails})}Copy the code

Here’s what the demo looks like: