vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src

vue3+vite: penggunaan src memerlukan untuk mengimport imej dan laporan ralat dan penyelesaian secara dinamik

vue3 + vite mengimport berbilang imej secara dinamik

vue3 Jika anda menggunakan pembangunan skrip taip, require akan muncul Apabila memperkenalkan imej, mesej ralat dilaporkan, memerlukan tidak ditakrifkan Anda tidak boleh mengimportnya seperti imgUrl: require(’…/assets/test.png’) seperti menggunakan vue2 Ini kerana skrip taip tidak menyokong memerlukan
, jadi anda menggunakan import untuk mengimportnya. Berikut ialah cara menyelesaikannya: Gunakan await import(’@/assets/img/22.png’);

demo1.vue

<template>
    <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  : 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 untuk mengitar semula nilai pulangan untuk meminta imej tempatan

<template>
    <img src="/static/imghwm/default1.png"  data-src="getAssetsImages(item.url)"  class="lazy"   v-for="item in imgList" : 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>

Rekodkan masalah yang dihadapi semasa menggunakan vue3 Mungkin ada cara lain untuk menyelesaikan masalah mengimport imej nasihat anda~

Tambahan: vue3+vite:src Use require to introduce absoluteness Path error

Projek terbaharu ialah vue3+vite Apabila menggunakan require untuk merujuk laluan imej, ralat ". memerlukan tidak ditakrifkan" dilaporkan, yang sangat memalukan. Kerana skrip taip tidak menyokong memerlukan, saya menggunakan imgUrl secara langsung: require(’ …/assets/test.png’) Ralat akan dilaporkan semasa mengimport. Anda perlu gunakan import untuk mengimport nilai untuk meminta imej tempatan

<template>
    <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  : 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>

Atas ialah kandungan terperinci vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!