vue3+vite:src latest solution to dynamically import images using require to report errors

vue3+vite:src uses require to dynamically import images to report errors and solutions

vue3 + vite dynamically import multiple images

If vue3 is developed using typescript, an error will occur in the import of require image. Require is not defined. Is it not defined. I cannot import imgUrl: require(’…/assets/’) like using vue2 because typescript does not support require.
So import with import. The following is how to solve it: Use await import(’@/assets/img/’);

<template>
    <img :src="imgUrl" alt="">
</template>

<script>
    import {ref, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
            onMounted(()=>{
                handleImgSrc();
            })
            const imgUrl = ref('');
            const handleImgSrc = async()=>{
                let m = await import('@/assets/img/');
                 = ;
            };
            return{
                imgUrl
            }
        }
    }
</script>

Recycle the return value to request the local image

&lt;template&gt;
    &lt;img  v-for="item in imgList" :src="getAssetsImages()" alt=""&gt;
&lt;/template&gt;

&lt;script&gt;
    import {ref, reactive, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
        
       		const imgList = reactive([
				{url: ''},{url: ''},{url: ''}
			])
             const getAssetsImages =(name)=&gt; {
		      return new URL(`/src/assets/pic/${name}`, ).href; //Local file path		 	 }

            return{
            	imgList ,
                getAssetsImages 
            }
        }
    }
&lt;/script&gt;

Record the problems encountered when using vue3. There may be other ways to solve the problem of image introduction. Please give me some advice~

Supplement: vue3+vite:src uses require to introduce an error in the absolute path

The recent project is vue3+vite. When using require to refer to the image path, it will report an error. Require is not defined, which is embarrassing. Because typescript does not support require, I used imgUrl: require(’…/assets/’) to import. If you need to import it, you need to use import to record the solution:

The first type: use await import(’@/assets/img/’);

<template>
    <img :src="imgUrl" alt="">
</template>
 
<script>
    import {ref, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
            onMounted(()=>{
                handleImgSrc();
            })
            const imgUrl = ref('');
            const handleImgSrc = async()=>{
                let m = await import('@/assets/img/');
                 = ;
            };
            return{
                imgUrl
            }
        }
    }
</script>

The second type: Recycle the return value and request the local image

&lt;template&gt;
    &lt;img  v-for="item in imgList" :src="getAssetsImages()" alt=""&gt;
&lt;/template&gt;
 
&lt;script&gt;
    import {ref, reactive, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
        
               const imgList = reactive([
                {url: ''},{url: ''},{url: ''}
            ])
             const getAssetsImages =(name)=&gt; {
              return new URL(`/src/assets/pic/${name}`, ).href; //Local file path              }
 
            return{
                imgList ,
                getAssetsImages 
            }
        }
    }
&lt;/script&gt;

This is the article about vue3+vite:src dynamically importing images with require and solutions. This is all about this. For more related contents of vue3 vite importing images with errors, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!