찾다

 >  Q&A  >  본문

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

<p>저는 Vue 3와 Vite를 사용하고 있습니다. Vite에서 프로덕션을 구축한 후 동적 img src에 문제가 발생했습니다. 정적 img src에는 문제가 없습니다. </p> <pre class="brush:php;toolbar:false;"><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" /></pre> <p> (menuItem.iconSource에는 "my-image.png"와 같은 이미지 이름이 포함되어 있습니다). 이 경우 개발 모드에서 애플리케이션을 실행할 때는 작동하지만 프로덕션 빌드 후에는 작동하지 않습니다. Vite가 프로덕션용 애플리케이션을 빌드하면 경로가 변경됩니다(모든 자산은 <code>_assets</code> 폴더에 배치됩니다). 정적 이미지 소스는 Vite 빌드에 의해 처리되고 그에 따라 경로가 변경되지만 합성 이미지 소스는 그렇지 않습니다. 단지 <code>/src/assets/images/</code> 를 상수로 취하고 변경하지 않습니다(애플리케이션이 이미지 /src/assets/images/my-image.png에 대해 404를 찾을 수 없는 경우, 네트워크 모니터에서 볼 수 있습니다)). 해결책을 찾으려고 하는데 누군가 <code>require()</code> 사용을 제안했지만 vite가 이를 사용할 수 있는지 잘 모르겠습니다. </p>
P粉511749537P粉511749537517일 전540

모든 응답(1)나는 대답할 것이다

  • P粉310931198

    P粉3109311982023-08-28 00:02:02

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

    회신하다
    0
  • 취소회신하다