Use import to refer to local pictures in vue project

Strange way to use, the picture needs to be placed in the project and then used.
The storage path of the picture in the project, after the import is introduced, it can be directly used as a js variable to use the

js code

 <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>