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>