About the problem of dynamic splicing src image address of img in Vue

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

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

<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',
      },
    }
}

In methods

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

This is the end of this article about dynamic splicing of img in Vue: src image address. For more relevant vue img dynamic splicing content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!