vue で絶対パスを導入するときにエラーが発生した場合はどうすればよいですか?

vue に絶対パスを導入する際のエラーの解決策: 1. "await import('@/assets/img/22.png');" を使用してパスを導入します; 2. 戻り値を再利用します。ローカル画像をリクエストする

このチュートリアルの動作環境: Windows 10 システム、vue3 バージョン、DELL G3 コンピューター

次の場合はどうすればよいですかvueに絶対パスを導入するとエラーが発生しますか?

vue3 vite:src require を使用して絶対パスを導入し、エラーを報告します。

最新のプロジェクトは vue3 vite です。require を使用して画像パスを参照すると、エラー「 require が定義されていません」と報告され、非常に恥ずかしいです。typescript は require をサポートしていないため、require('.../assets/test.png') の直前に imgUrl を使用しました。インポート時にエラーが報告されます。インポートするには import を使用する必要があります。解決策を記録します:

最初の方法: 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>

2 番目のタイプ: Recycleローカル画像をリクエストするための戻り値

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

推奨学習: "vue ビデオ チュートリアル >>

以上がvue で絶対パスを導入するときにエラーが発生した場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。