前言

在 Vue 開(kāi)發(fā)中，圖片的引用方式主要取決于圖片存放的位置，常見(jiàn)的存放方式包括：

• 存放在 public/ 目錄
• 存放在 assets/ 目錄
• 存放在遠(yuǎn)程服務(wù)器
• 動(dòng)態(tài)拼接圖片路徑

本文將詳細(xì)分析這些方式的區(qū)別，并提供完整的代碼示例和注釋

1. 引用 public/ 目錄

public/ 目錄下的文件會(huì)被 Vue 直接映射到項(xiàng)目的根路徑 /，無(wú)需 Webpack 處理，適用于：

• 不會(huì)被打包處理的靜態(tài)資源
• 圖片 URL 確定，不依賴 Webpack 解析

正確寫法

<template>
  <div>
    <!-- 直接從 public 目錄訪問(wèn)圖片 -->
    <img src="/manufacturing.png" alt="Manufacturing Image" />
  </div>
</template>

錯(cuò)誤寫法

<template>
  <div>
    <!-- public 目錄不需要 public/ 前綴 -->
    <img src="/public/manufacturing.png" alt="Error Image" />
  </div>
</template>

說(shuō)明： public/ 目錄的內(nèi)容會(huì)被 Vue 直接映射到根路徑 /，所以訪問(wèn) /public/xxx.png 是錯(cuò)誤的

截圖如下：

2. assets/ 目錄

適用場(chǎng)景

assets/ 目錄下的圖片會(huì)被 Vue 通過(guò) Webpack 進(jìn)行打包，適用于：

• 存放在 src/assets/ 目錄
• 需要 Webpack 處理，如哈希命名
• 圖片路徑動(dòng)態(tài)變化

使用 import 方式

<script setup>
import imageUrl from '@/assets/images/manufacturing.png'
</script>

<template>
  <div>
    <img :src="imageUrl" alt="Manufacturing Image" />
  </div>
</template>

說(shuō)明：

import 方式會(huì)將圖片路徑解析為 Webpack 處理的 URL

適用于靜態(tài)導(dǎo)入，但不適用于動(dòng)態(tài)路徑拼接

使用 new URL() 方式

<script setup>
const imageSrc = new URL('@/assets/images/manufacturing.png', import.meta.url).href
</script>

<template>
  <div>
    <img :src="imageSrc" alt="Manufacturing Image" />
  </div>
</template>

說(shuō)明：

new URL() 適用于 assets 目錄，支持動(dòng)態(tài)路徑處理

3. 遠(yuǎn)程服務(wù)器

適用場(chǎng)景

• 圖片存放在 CDN 或外部服務(wù)器
• 不需要 Webpack 處理

<template>
  <div>
    <img src="https://example.com/images/manufacturing.png" alt="Remote Image" />
  </div>
</template>

說(shuō)明：

直接使用絕對(duì) URL 訪問(wèn)遠(yuǎn)程圖片，無(wú)需 Vue 處理

4. Vue Router 動(dòng)態(tài)訪問(wèn)

圖片名稱與路由路徑相關(guān)聯(lián)，可以使用 computed 計(jì)算屬性自動(dòng)生成圖片路徑

<template>
  <div>
    <img :src="imageSrc" alt="Dynamic Page Image" />
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

???????// 計(jì)算 public 目錄下的圖片路徑
const imageSrc = computed(() => {
  const sanitizedPath = route.path.replace(/^\//, '') // 移除開(kāi)頭的 `/`
  return `/${sanitizedPath}.png` // 訪問(wèn) public 目錄
})
</script>

假設(shè) public 目錄結(jié)構(gòu)如下：

public/
├── home.png
├── about.png
├── contact.png

訪問(wèn) /home 時(shí)，圖片路徑為：

<img src="/home.png" />

動(dòng)態(tài)路由的方式有所差異：

<template>
  <div>
    <img :src="imageSrc" alt="Dynamic Page Image" />
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

???????// 計(jì)算 public 目錄下的圖片路徑
const imageSrc = computed(() => {
  const sanitizedPath = route.path.replace(/^\//, '') // 移除開(kāi)頭的 `/`
  const lastSegment = sanitizedPath.split('/').pop() // 獲取最后的路徑部分
  return `/${lastSegment}.png` // 訪問(wèn) public 目錄
})
</script>

截圖如下：

5. 總結(jié)

總的來(lái)說(shuō)：

最佳實(shí)踐：

• public/ 目錄適用于靜態(tài)資源，直接使用 /filename.png 訪問(wèn)
• assets/ 目錄適用于 Webpack 處理，使用 import 或 new URL()
• 外部圖片直接使用絕對(duì) URL
• 動(dòng)態(tài)圖片路徑可結(jié)合 Vue Router 計(jì)算生成

6. 擴(kuò)展（圖片不顯示）

圖片無(wú)法顯示通常是路徑錯(cuò)誤、資源未正確加載或 Webpack/Vite 處理導(dǎo)致的問(wèn)題

圖片不顯示的常見(jiàn)原因

在 Vue 3 + Vite（或 Webpack）項(xiàng)目中，圖片可能無(wú)法顯示的常見(jiàn)原因包括：

1.路徑錯(cuò)誤：引用 public/ 目錄時(shí)仍加 public/ 前綴

2.資源未正確加載：如 src/assets/ 目錄下的圖片未被 Webpack 處理

3.動(dòng)態(tài)路徑問(wèn)題：使用 computed 計(jì)算屬性拼接路徑時(shí)錯(cuò)誤

4.Webpack 處理方式：assets/ 目錄下的圖片會(huì)被 Webpack 處理，不能直接訪問(wèn)

5.圖片格式或大小問(wèn)題：瀏覽器不支持的圖片格式或圖片損壞

路徑錯(cuò)誤這個(gè)要點(diǎn)此處著重分析下

詳細(xì)分析下為何要放在public等路徑下！

public/ 目錄的映射機(jī)制

在 Vue 項(xiàng)目結(jié)構(gòu)中：

my-project/
├── public/
│   ├── manufacturing.png
│   ├── images/
│   │   ├── factory.png
├── src/
│   ├── views/
│   │   ├── Industry.vue
│   ├── assets/
│   │   ├── example.png
│   ├── App.vue

public/manufacturing.png 在構(gòu)建后會(huì)被 Vue 直接映射到：/manufacturing.png

public/images/factory.png 在構(gòu)建后會(huì)變成：/images/factory.png

src/assets/example.png 則會(huì)被 Webpack 處理，并生成動(dòng)態(tài)路徑（如 /assets/example.abcdef.png）

如何證明 public/ 目錄直接映射到根路徑 /？

可以打開(kāi) http://localhost:5173/manufacturing.png，如果 manufacturing.png 直接顯示，則說(shuō)明它已經(jīng)被映射到根目錄 /，而不需要 /public/manufacturing.png

對(duì)比 public/ 和 src/assets/

使用 public/ 目錄

<template>
  <div>
    <img src="/manufacturing.png" alt="Manufacturing Image" />
  </div>
</template>

使用 src/assets/ 目錄

<script setup>
import imgUrl from '@/assets/example.png'
</script>

???????<template>
  <div>
    <img :src="imgUrl" alt="Example Image" />
  </div>
</template>

到此這篇關(guān)于Vue中圖片的引用方式的區(qū)別詳解的文章就介紹到這了,更多相關(guān)Vue圖片引用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論