Rumah > hujung hadapan web > View.js > vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src

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

WBOY
Lepaskan: 2023-05-21 15:16:06
ke hadapan
4670 orang telah melayarinya

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="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>
Salin selepas log masuk

demo2.vue untuk mengitar semula nilai pulangan untuk meminta imej tempatan

<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>
Salin selepas log masuk

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="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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:yisu.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan