import を使用して vue プロジェクトのローカル画像を参照する

奇妙な使い方ですが、画像をプロジェクトに配置して使用する必要があります。プロジェクト内
の画像の保存パスは、インポートが導入された後、js コードを使用するための js 変数として直接使用できます

。

 <div v-for="(item,index) in tvbgArr" :key="item">
   <img :src="item" alt="">
 </div>
          
<script>
import Img001 from "@/assets/signBg/001.jpg"
import Img002 from "@/assets/signBg/002.jpg"
import Img003 from "@/assets/signBg/003.jpg"
import Img004 from "@/assets/signBg/004.jpg"

export default defineComponent({
      
      
  setup(props, context) {
      
      
    const data = reactive({
      
      
      tvbgArr: [
        Img001,
        Img002,
        Img003,
        Img004,
      ],
    }); 
    return {
      
      
      ...toRefs(data)
    };
  },
});
</script>