vue3+vite: So beheben Sie den Fehler bei der Verwendung von require zum dynamischen Importieren von Bildern in src

vue3+vite: src verwendet „require“, um Bilder sowie Fehlerberichte und Lösungen dynamisch zu importieren.

vue3 + vite importiert dynamisch mehrere Bilder.

vue3 Wenn Sie Typescript-Entwicklung verwenden, tritt beim Importieren von Bildern ein Fehler auf, „require“ ist nicht definiert und kann nicht wie „Verwenden Sie vue2 zum Importieren wie imgUrl: require(’…/assets/test.png’)“ sein, da Typescript „require“ nicht unterstützt. Daher wird Import verwendet. So lösen Sie das Problem: Verwenden Sie „await import(“. ;@/assets/img/ 22.png’);

demo1.vue

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

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

demo2.vue Recyceln Sie den Rückgabewert, um lokale Bilder anzufordern

<template>
    <img  v-for="item in imgList" :src="getAssetsImages(item.url)" alt="">
</template>

<script>
    import {ref, reactive, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
        
       		const imgList = reactive([
				{url: &#39;a.png&#39;},{url: &#39;b.png&#39;},{url: &#39;c.png&#39;}
			])
             const getAssetsImages =(name)=> {
		      return new URL(`/src/assets/pic/${name}`, import.meta.url).href; //本地文件路径
		 	 }

            return{
            	imgList ,
                getAssetsImages 
            }
        }
    }
</script>

Zeichnen Sie die bei der Verwendung von vue3 aufgetretenen Probleme auf. Möglicherweise gibt es andere Möglichkeiten Um das Problem der Bildeinführung zu lösen, geben Sie mir bitte einige Ratschläge ~

Ergänzung: vue3+vite:src verwendet require, um den absoluten Pfad einzuführen, und meldet einen Fehler

Das neueste Projekt ist vue3+vite, wenn require als Referenz verwendet wird Im Bildpfad wird der Fehler „require ist nicht definiert“ gemeldet, was sehr peinlich ist, da Typescript „require“ nicht unterstützt. Daher habe ich imgUrl direkt verwendet: require(’…/assets/test.png’) beim Importieren, Es wird ein Fehler gemeldet. Zum Importieren müssen Sie die Lösung verwenden:

Erste Methode: Verwenden Sieawait import(’ @/assets/img/22.png’);

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

Zweitens: Recyceln Sie den Rückgabewert um lokale Bilder anzufordern

<template>
    <img  v-for="item in imgList" :src="getAssetsImages(item.url)" alt="">
</template>
 
<script>
    import {ref, reactive, onMounted} from "vue";
    export default {
        name: "imgPage",
        setup(){
        
               const imgList = reactive([
                {url: &#39;a.png&#39;},{url: &#39;b.png&#39;},{url: &#39;c.png&#39;}
            ])
             const getAssetsImages =(name)=> {
              return new URL(`/src/assets/pic/${name}`, import.meta.url).href; //本地文件路径
              }
 
            return{
                imgList ,
                getAssetsImages 
            }
        }
    }
</script>

Das obige ist der detaillierte Inhalt vonvue3+vite: So beheben Sie den Fehler bei der Verwendung von require zum dynamischen Importieren von Bildern in src. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!