vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法-Vue.js-php.cn

vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法

WBOY

リリース： 2023-05-21 15:16:06

転載

4534 人が閲覧しました

vue3 vite:src は、イメージとエラーレポートと解決策を動的にインポートするために require を使用します

vue3 vite は複数のイメージを動的にインポートします

vue3 TypeScript 開発を使用している場合、イメージをインポートするために require が表示されますエラーが報告され、require が定義されておらず、vue2 を使用する場合のように imgUrl: require(’…/assets/test.png’) をインポートできません。これは、typescript が require
をサポートしていないため、インポートが使用されます解決方法は次のとおりです: 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>

ログイン後にコピー

demo2.vue## を使用します。 # 戻り値を再利用してローカルイメージをリクエストします

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

ログイン後にコピー

vue3 使用時に発生した問題を記録します。イメージ導入の問題を解決する他の方法があるかもしれません。アドバイスをお願いします~

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

最新のプロジェクトは vue3 vite です。require を使用してイメージパスを参照すると、「require が定義されていません」というエラーが報告されます。非常に恥ずかしいです。typescript は require をサポートしていないため、imgUrl を直接使用しました: require(’…/assets /test.png’) はインポート時にエラーを報告します。インポートするには 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 番目のタイプ: 戻り値をリサイクルしてローカルイメージをリクエストします

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

ログイン後にコピー

以上がvue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。