vue import的圖片路徑想用動態的方式改變怎麼辦?

通常在引入圖片的時候,我們會直接寫死import的圖片,像是這樣:

import Img1 from "@/assets/Img1.png";

 

如果要動態改變圖片,通常也是一次把會用到的圖片import進來

import Img1 from "@/assets/Img1.png";
import Img2 from "@/assets/Img2.png";
//...

可是如果我是依照props動態決定要顯示哪個路徑呢?這樣不就要先一次把所有可能用到的檔案import進來嗎?

<img :src="imgSrc" />
//...

import Img1 from "@/assets/Img1.png";
import Img2 from "@/assets/Img2.png";
//...

props:{
  imgNumber: {
    type: Number,
    default: 1,
  }
},
data() {
  return {
    imgSrc: this.imgNumber === 1 ? Img1 : Img2,
  }
}

 

  上網找了眾多資料和方法之後,我找到的一個堪稱還可用的解法:

<script>
const getBtnImg = path => require(`@/assets/Img${path}.png`);

export default {
  props:{
    imgNumber: {
      type: Number,
      default: 1,
    }
  },
  data() {
    return {
      imgSrc: getBtnImg(this.imgNumber),
    };
  },
}

</script>

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。