Question about dynamic splicing of src image addresses in Vue

Let’s take a look at the dynamic splicing of img in Vue: src image address, the specific content is as follows:

Usage scenario: match local image resources based on the image return mark of the backend
For example: Returning the k1 mark based on the backend, the frontend generates assets/images/inventory/image resource path

<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 image address    getImgUrl (img) {
      return require("@/assets/images/inventory/" + img+ ".png");
    },

This is the article about img dynamic splicing: src image address in Vue. For more related vue img dynamic splicing content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!