Apakah yang perlu saya lakukan jika saya mendapat ralat semasa memperkenalkan laluan mutlak dalam vue?

Penyelesaian kepada ralat semasa memperkenalkan laluan mutlak dalam vue: 1. Gunakan "await import('@/assets/img/22.png');" untuk memperkenalkan laluan; minta imej tempatan Itu sahaja.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi vue3, komputer DELL G3

Apakah yang perlu saya lakukan jika saya mendapat ralat semasa memperkenalkan laluan mutlak dalam vue?

penggunaan vue3+vite:src memerlukan untuk memperkenalkan laluan mutlak dan melaporkan ralat

Projek terbaharu ialah vue3+vite Apabila menggunakan memerlukan untuk merujuk laluan imej, ia melaporkan keperluan ralat tidak ditakrifkan. Ia memalukan, kerana skrip taip tidak menyokong memerlukan, jadi saya menggunakan imgUrl secara langsung: require('.../assets/test.png') untuk mengimport, dan ralat akan dilaporkan gunakan import untuk mengimport. Rekod penyelesaian:

Kaedah pertama: Gunakan await 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>

Kedua: Kitar semula pulangan nilai 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>

Pembelajaran yang disyorkan: " tutorial video vue》

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika saya mendapat ralat semasa memperkenalkan laluan mutlak dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!