1.?直接指定?src?的值（適用于網絡圖片）

如果你使用的是網絡圖片（即圖片的URL是完整的HTTP或HTTPS鏈接），可以直接指定?src?的值：

vue

復制

<template><div><img src="https://example.com/your-image.jpg" alt="描述圖片"></div>
</template>

這種方式非常簡單，適用于圖片已經托管在網絡上。

---

2.?直接指定?src?的值（適用于本地圖片）

如果你使用的是本地圖片（即圖片存放在項目的?src/assets?或?public?目錄中），直接指定?src?的值可能會導致圖片無法正確加載。原因如下：

• Vue CLI 項目默認會使用 Webpack 打包，而 Webpack 會將本地圖片視為模塊處理。

• 如果你直接寫?src="./assets/your-image.jpg"，Webpack 不會正確解析路徑，導致圖片加載失敗。

正確的做法：

你需要使用?require?或?import?來引入圖片，這樣 Webpack 會正確處理路徑。

vue

復制

<template><div><img :src="imageUrl" alt="描述圖片"></div>
</template><script>
export default {data() {return {imageUrl: require('@/assets/your-image.jpg') // 使用 require 引入圖片};}
};
</script>

或者使用?import：

vue

復制

<template><div><img :src="imageUrl" alt="描述圖片"></div>
</template><script>
import imageUrl from '@/assets/your-image.jpg'; // 使用 import 引入圖片export default {data() {return {imageUrl};}
};
</script>

---

3.?將圖片放在?public?目錄

如果你不想通過 Webpack 處理圖片，可以將圖片放在?public?目錄中。public?目錄中的文件不會被 Webpack 處理，而是直接復制到打包后的?dist?目錄中。

• 將圖片放在?public/images/your-image.jpg。

• 直接指定?src?的值為絕對路徑：

vue

復制

<template><div><img src="/images/your-image.jpg" alt="描述圖片"></div>
</template>

這種方式適合靜態圖片，且圖片路徑不會動態變化。

---

4.?動態綁定?src

如果你需要動態綁定圖片路徑（例如根據用戶輸入或條件切換圖片），可以使用?v-bind（或簡寫為?:）動態綁定?src：

vue

復制

<template><div><img :src="imageUrl" alt="描述圖片"></div>
</template><script>
export default {data() {return {imageUrl: '' // 初始為空};},mounted() {// 動態設置圖片路徑this.imageUrl = require('@/assets/your-image.jpg');}
};
</script>

---

總結

• 網絡圖片：可以直接指定?src?的值。

• 本地圖片：

  • 如果圖片在?src/assets?目錄中，需要使用?require?或?import?引入。

  • 如果圖片在?public?目錄中，可以直接指定?src?的值為絕對路徑。

• 動態圖片：使用?v-bind?動態綁定?src。