On the dynamic mosaic of src picture address by img in Vue

Let's look at img dynamic splicing in Vue: src picture address, the specific contents are as follows:

Usage scenario: Match local picture resources according to the picture tag returned by the backend
For example, the front end generates the assets/images/inventory/k1.png picture resource path according to the k1 tag returned by the back end

<template>
    <div class="fl">
          <img :src="getImgUrl(gatherInfo.img1)" alt="">
          <img :src="getImgUrl(gatherInfo.img2)" alt="">
          <img :src="getImgUrl(gatherInfo.img3)" alt="">
     </div>
</template>

data(){
    return{
      gatherInfo: {
        title: ' Inventory summary information ',
        img1: 'k1',
        img2: 'k2',
        img3: 'k3',
      },
    }
}

Inside methods

// Get the picture address 
    getImgUrl (img) {
      return require("@/assets/images/inventory/" + img+ ".png");
    },