vue3+vite 자산은 이미지를 동적으로 도입하고 패키징 후 잘못된 이미지 경로가 표시되지 않는 문제를 해결합니다.

vite 공식적인 기본 구성으로, 리소스 파일이 자산 폴더에 패키징되어 있으면 이미지 이름에 해시 값이 추가되지만, src="imgSrc"를 통해 직접 도입되면 패키징 중에 구문 분석되지 않습니다. , 개발 환경이 정상적으로 발생합니다. 도입된 문제는 패키징 후 표시할 수 없습니다

우리는 실제로 리소스 파일이 wbpack에 의해 컴파일되는 것을 원하지 않습니다이미지를 공용 디렉토리에 넣는 것이 더 쉬울 것입니다. 개발 환경이든 프로덕션 환경이든 항상 루트 디렉터리에 유지 관리할 수 있습니다. 이미지 경로는 일관됩니다, 이는 webpack

이것을 보면 정말 필요한 경우 문제가 해결될 수도 있습니다. Vite의 자산에 정적 파일을 넣으려면 다음을 살펴보겠습니다.

여기 먼저 가정하겠습니다.
정적 파일 디렉터리: src/assets/images/src/assets/images/
我们的目标静态文件在 src/assets/images/home/home_icon.png

<img  :src="require(&#39;@/assets/images/home/home_icon.png&#39;)" / alt="vue3+vite 자산은 이미지를 동적으로 도입하고 패키징 후 잘못된 이미지 경로가 표시되지 않는 문제를 해결합니다." >

尝试过require动态引入， 发现报错：require is not defind，这是因为 require 是属于 Webpack 的方法

第一种方式（适用于处理单个链接的资源文件）

import homeIcon from '@/assets/images/home/home_icon.png'
<img  :src="homeIcon" / alt="vue3+vite 자산은 이미지를 동적으로 도입하고 패키징 후 잘못된 이미지 경로가 표시되지 않는 문제를 해결합니다." >

第二种方式（适用于处理多个链接的资源文件）

推荐，这种方式传入的变量可以动态传入文件路径！！

静态资源处理 | Vite 官方中文文档
new URL() + import.meta.url

这里我们假设：
工具文件目录： src/util/pub-use.ts
pub-use.ts

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

使用

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsFile = Pub.getAssetsFile
  return { getAssetsFile }
}

可以包含文件路径

<img  :src="getAssetsFile(&#39;/home/home_icon.png&#39;)" / alt="vue3+vite 자산은 이미지를 동적으로 도입하고 패키징 후 잘못된 이미지 경로가 표시되지 않는 문제를 해결합니다." >

第三种方式（适用于处理多个链接的资源文件）

不推荐，这种方式引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径

使用vite的import.meta.glob或import.meta.globEager，两者的区别是前者懒加载资源，后者直接引入。

这里我们假设：
工具文件目录： src/util/pub-use.ts대상 정적 파일은 에 있습니다. src/assets/images/home/home_icon.png

// 获取assets静态资源
export default const getAssetsHomeFile = (url: string) => {
    const path = `../assets/images/home/${url}`;
    const modules = import.meta.globEager("../assets/images/home/*");
    return modules[path].default;
}

require의 동적 도입을 시도했는데 require가 정의되지 않았습니다라는 오류를 발견했습니다. 이는 require가 속한 메서드이기 때문입니다. to Webpack

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsHomeFile = Pub.getAssetsHomeFile 
  return { getAssetsHomeFile }
}

로그인 후 복사

권장, 이렇게 전달된 변수는 파일에 동적으로 전달될 수 있습니다. 길! !

정적 리소스 처리 | Vite 공식 중국어 문서

여기에서는 다음을 가정합니다.

위 내용은 vue3+vite 자산은 이미지를 동적으로 도입하고 패키징 후 잘못된 이미지 경로가 표시되지 않는 문제를 해결합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!