vue 项目中使用import引用本地图片

最新推荐文章于 2024-05-03 11:08:18 发布

青衣浏阳

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量2.7k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_49016709/article/details/127670573

版权

奇葩的使用方式，图片需要放在项目里然后被使用
图片在项目里的存放路径,import 引入之后可以直接作为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>