vue3+vite : Comment résoudre l'erreur lors de l'utilisation de require pour importer dynamiquement des images dans src

vue3+vite : src utilise require pour importer dynamiquement des images, des rapports d'erreurs et des solutions

vue3 + vite importe dynamiquement plusieurs images

vue3 Si vous utilisez le développement dactylographié, il y aura une erreur lorsque require importe des images, require n'est pas défini et ne peut pas être comme Utilisez vue2 pour importer comme imgUrl : require(’…/assets/test.png’) car typescript ne prend pas en charge require
, donc import est utilisé Voici comment le résoudre : Utilisez wait import(&rsquo. ;@/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 Recyclez la valeur de retour pour demander des images locales

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

Enregistrez les problèmes rencontrés lors de l'utilisation de vue3, il existe peut-être d'autres moyens pour résoudre le problème de l'introduction de l'image, et veuillez me donner quelques conseils~

Supplémentaire : vue3+vite : src utilise require pour introduire le chemin absolu et signale une erreur

Le dernier projet est vue3+vite lors de l'utilisation de require pour référencer. le chemin de l'image, l'erreur "require n'est pas défini" est signalée, ce qui est très gênant, car Typescript ne supporte pas require, j'ai donc utilisé directement imgUrl : require(’…/assets/test.png’) lors de l'import, une erreur sera signalée. Vous devez utiliser import pour importer. Enregistrez la solution :

Première méthode : utilisez wait 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>

Deuxième : recyclez la valeur de retour. pour demander des images locales

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!