Vue 3 Vite - 실시간 업데이트되는 이미지 링크

Question

저는 Vue 3와 Vite를 사용하고 있습니다. Vite에서 프로덕션을 구축한 후 동적 img src에 문제가 발생했습니다. 정적 img src에는 문제가 없습니다.

<img src="/src/assets/images/my-image.png" alt="Image" class="logo"/>< ;/pre>
<p>개발 모드에서 실행할 때와 vite 빌드 후에 두 경우 모두에서 잘 작동합니다. 하지만 동적으로 로드된 데이터베이스(메뉴 아이콘)에 일부 이미지 이름이 저장되어 있습니다. 이 경우 다음과 같이 경로를 작성해야 합니다. </p>
<pre class="brush:php;toolbar:false;"><img :src="'/src/assets/images/' + menuItem.iconSource" />

(menuItem.iconSource에는 "my-image.png"와 같은 이미지 이름이 포함되어 있습니다). 이 경우 개발 모드에서 애플리케이션을 실행할 때는 작동하지만 프로덕션 빌드 후에는 작동하지 않습니다. Vite가 프로덕션용 애플리케이션을 빌드하면 경로가 변경됩니다(모든 자산은 _assets 폴더에 배치됩니다). 정적 이미지 소스는 Vite 빌드에 의해 처리되고 그에 따라 경로가 변경되지만 합성 이미지 소스는 그렇지 않습니다. 단지 /src/assets/images/ 를 상수로 취하고 변경하지 않습니다(애플리케이션이 이미지 /src/assets/images/my-image.png에 대해 404를 찾을 수 없는 경우, 네트워크 모니터에서 볼 수 있습니다)). 해결책을 찾으려고 하는데 누군가 require() 사용을 제안했지만 vite가 이를 사용할 수 있는지 잘 모르겠습니다.

Answer 1

2022 업데이트: Vite 3.0.9 + Vue 3.2.38

동적 소스 바인딩 솔루션:

1. 정적 URL을 사용하세요

으아악

2. 동적 URL 및 상대 경로

를 사용하세요. 으아악

3. 동적URL 및 절대경로

보유

롤업 제한으로 인해 모든 가져오기는 가져오기 파일을 기준으로 시작해야 하며 변수로 시작해서는 안 됩니다.

별명을 변경해야 합니다 @/ 替换为 /src

으아악

---

---

2022 답변: Quick 2.8.6 + Vue 3.2.31

로컬 및 프로덕션 빌드에서 저에게 적합한 방법은 다음과 같습니다.

으아악

SSR에서는 작동하지 않으니 주의하세요

---

Vite 문서: 새 URL