vue에 절대 경로를 도입할 때 발생하는 오류에 대한 해결 방법: 1. "await import('@/assets/img/22.png');"를 사용하여 경로를 도입합니다. 2. 로컬 이미지를 요청하기 위해 반환 값을 재활용합니다. .
이 튜토리얼의 운영 환경: 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(''); const handleImgSrc = async()=>{ let m = await import('@/assets/img/22.png'); 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: 'a.png'},{url: 'b.png'},{url: 'c.png'} ]) const getAssetsImages =(name)=> { return new URL(`/src/assets/pic/${name}`, import.meta.url).href; //本地文件路径 } return{ imgList , getAssetsImages } } } </script>
권장 학습: "vue 비디오 튜토리얼"
위 내용은 Vue에 절대 경로를 도입할 때 오류가 발생하면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!