vue3+vite: Bagaimana untuk menyelesaikan ralat apabila menggunakan memerlukan untuk mengimport imej secara dinamik dalam src-View.js-php.cn

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

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