Wo werden Vue-Bilddateien abgelegt?

In einem Vue-Projekt können Bilddateien im statischen Ressourcenverzeichnis (statisch oder öffentlich), im Assets-Unterverzeichnis oder in der Komponentendatei abgelegt werden. Sie können Bilder mithilfe des src-Attributs referenzieren und je nachdem, wo das Bild platziert wird, unterschiedliche Pfade verwenden.

Speicherort für Vue-Bilddateien

In einem Vue-Projekt werden Bilddateien normalerweise an den folgenden Speicherorten abgelegt:

1. Statisches Ressourcenverzeichnis im Projektstammverzeichnis

• Name: static oder 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

  Platzieren Sie im Allgemeinen statische Ressourcen wie Bilder, Schriftarten, CSS und JavaScript

• 2 assets Unterverzeichnis

• src/assets

Zum Platzieren von Bildern, Symbolen und Mediendateien🎜🎜🎜🎜3. Innerhalb der Komponentendatei🎜🎜🎜🎜🎜Für Bilder, die in die Komponente eingebettet werden müssen, können Sie platzieren sie in der Komponentendatei:
src/components/MyComponent.vue🎜

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

🎜🎜🎜🎜Wie referenziere ich Bilder? 🎜🎜🎜🎜🎜Verwenden Sie das Attribut src: 🎜

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

🎜🎜🎜 Relativ zu Komponentendateipfaden: 🎜

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

🎜🎜🎜Für in Komponentendateien eingebettete Bilder verwenden Sie relative Pfade: 🎜rrreee🎜🎜

Das obige ist der detaillierte Inhalt vonWo werden Vue-Bilddateien abgelegt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!