中img動態拼接:src圖片地址

使用場景：根據後端返回圖片標記來匹配本地圖片資源
例如：根據後端返回k1標記，前端生成assets/images/inventory/k1.png圖片資源路徑

<template>
    <div class="fl">
          <img :src="getImgUrl(gatherInfo.img1)" alt="關於Vue中img動態拼接src圖片地址的問題">
          <img :src="getImgUrl(gatherInfo.img2)" alt="關於Vue中img動態拼接src圖片地址的問題">
          <img :src="getImgUrl(gatherInfo.img3)" alt=http://www.cppcns.com
 
"關於Vue中img動態拼接src圖片地址的問題">
     </div>
</template>

data(){
    return{
      gatherInfo: {
    www.cppcns.com    title: '庫存彙總資訊',img1: 'k1',img2: 'k2',img3: 'k3',},}
}

methods裡面

//獲取圖片地址
    getImgUrl (img) {
      return require("@/assets/images/inventory/" + img+ ".png");
    },

到此這篇關於Vue中img動態拼接:src圖片地址的文章就介紹到這了,更多相http://www.cppcns.com