vue圖片檔案放哪裡

在 Vue 專案中，圖片檔案可以放置在靜態資源目錄（static 或 public）、assets 子目錄或元件檔案內。引用圖片可以使用 src 屬性，並根據圖片放置位置使用不同的路徑。

Vue 圖片檔案放置位置

在Vue 專案中，圖片檔案通常放置在下列位置：

1. 專案根目錄的靜態資源目錄

• #名稱：static 或public

# #一般放置圖像、字體、CSS 和JavaScript 等靜態資源

• 2. assets
子目錄

# #src/assets

專用於放置圖像、圖示和媒體檔案

• 
  #3. 元件檔案內

對於需要嵌入到元件內的映像，可以將其放在元件檔案中：

src/components/MyComponent.vue

<template>
<img src="/static/imghwm/default1.png"  data-src="./image.jpg"  class="lazy" alt="My Image">
</template>

• #如何引用圖片？

• 使用

  src
屬性：

• <img src="/static/imghwm/default1.png"  data-src="/static/image.jpg"  class="lazy" alt="My Image">

相對於元件檔案路徑：

<img src="/static/imghwm/default1.png"  data-src="./image.jpg"  class="lazy" alt="My Image">

## #######對於在元件檔案中嵌入的映像，使用相對路徑：###

<img src="/static/imghwm/default1.png"  data-src="@/assets/image.jpg"  class="lazy" alt="My Image">

#######

以上是vue圖片檔案放哪裡的詳細內容。更多資訊請關注PHP中文網其他相關文章！