Vue中＜img＞?標簽的?src?值全解析

更新時間：2025年05月14日 09:24:28 作者：BillKu

這篇文章主要介紹了Vue中＜img＞?標簽的?src?值全解析,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

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

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

<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 會正確處理路徑。

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

或者使用 import：

<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 的值為絕對路徑：

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

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

4. 動態(tài)綁定 src

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

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

總結

網絡圖片：可以直接指定 src 的值。
本地圖片：
- 如果圖片在 src/assets 目錄中，需要使用 require 或 import 引入。
- 如果圖片在 public 目錄中，可以直接指定 src 的值為絕對路徑。
動態(tài)圖片：使用 v-bind 動態(tài)綁定 src。