Vue 이미지 파일을 넣을 위치

Vue 프로젝트에서 이미지 파일은 정적 리소스 디렉터리(정적 또는 공용), 자산 하위 디렉터리 또는 구성 요소 파일에 배치될 수 있습니다. src 속성을 사용하여 이미지를 참조할 수 있으며 이미지가 배치된 위치에 따라 다른 경로를 사용할 수 있습니다.

Vue 이미지 파일 배치 위치

Vue 프로젝트에서 이미지 파일은 일반적으로 다음 위치에 배치됩니다.

1 프로젝트 루트 디렉토리의 정적 리소스 디렉토리

• 이름: static 또는 publicstatic 或 public
• 一般放置图像、字体、CSS 和 JavaScript 等静态资源

2. assets 子目录

• src/assets
• 专用于放置图像、图标和媒体文件

3. 组件文件内

• 对于需要嵌入到组件内的图像，可以将其放在组件文件中：
  src/components/MyComponent.vue

  <code class="html"><template>
  <img src="./image.jpg" alt="My Image">
  </template></code>

如何引用图片？

• 使用 src

  일반적으로 이미지, 글꼴, CSS 및 JavaScript

• 2와 같은 정적 리소스를 assets 하위 디렉터리

• 에 배치합니다. src/assets

이미지, 아이콘 및 미디어 파일 배치 전용🎜🎜🎜🎜3. 구성 요소 파일 내에서🎜🎜🎜🎜🎜구성 요소 내에 삽입해야 하는 이미지의 경우 구성 요소 파일에 있습니다:
src/comComponents/MyComponent.vue🎜

<code class="html"><img src="/static/image.jpg" alt="My Image"></code>

🎜🎜🎜🎜이미지를 참조하는 방법은 무엇입니까? 🎜🎜🎜🎜🎜src 속성 사용: 🎜

<code class="html"><img src="./image.jpg" alt="My Image"></code>

🎜🎜🎜 구성 요소 파일 상대 경로: 🎜

<code class="html"><img src="@/assets/image.jpg" alt="My Image"></code>

🎜🎜🎜구성 요소 파일에 포함된 이미지의 경우 상대 경로 사용: 🎜rrreee🎜🎜

위 내용은 Vue 이미지 파일을 넣을 위치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!