Vue에 절대 경로를 도입할 때 오류가 발생하면 어떻게 해야 합니까?-프런트엔드 Q&A-php.cn

Vue에 절대 경로를 도입할 때 오류가 발생하면 어떻게 해야 합니까?

藏色散人

풀어 주다： 2023-01-29 14:57:01

원래의

2048명이 탐색했습니다.

vue에 절대 경로를 도입할 때 발생하는 오류에 대한 해결 방법: 1. "await import('@/assets/img/22.png');"를 사용하여 경로를 도입합니다. 2. 로컬 이미지를 요청하기 위해 반환 값을 재활용합니다. .

Vue에 절대 경로를 도입할 때 오류가 발생하면 어떻게 해야 합니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, vue3 버전, DELL G3 컴퓨터

vue에 절대 경로가 도입될 때 오류가 발생하면 어떻게 해야 합니까?

vue3+vite: src는 require를 사용하여 절대 경로를 도입하고 오류를 보고합니다.

최신 프로젝트는 vue3+vite입니다. require를 사용하여 이미지 경로를 참조하면 require is not Defined라는 오류가 발생합니다. typescript는 require를 지원하지 않습니다. 따라서 imgUrl: require('.../assets/test.png')를 사용하여 가져오려면 오류가 보고됩니다.

The 첫 번째: wait 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>

로그인 후 복사

두 번째: 반환 값을 재활용하여 로컬 이미지 요청

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!