關於 vue-cli 專案 中靜態圖片通過 require 引入的解釋

需求：如何 components 裡面的 index.vue 怎樣能把 assets 裡面的圖片拿出來。

1. 在 img 標籤中直接寫上路徑

<img src="../assets/logo.png" alt="" />

2. 使用變數接收靜態圖片路徑（必須使用 require）

<img :src="imgSrc" alt="" />

data() {
    return {
      // Vue中js部分引入靜態圖片，必須使用require引入，否則無法正常顯示
      imgSrc:require('../assets/logo.png')

      // 不可以使用以下寫法
      // imgSrc:'../assets/logo.png'
    }
  }
 

總結

• 經過驗證，若需要通過變數接收靜態圖片路徑，則必須使用 require 引入，原因是因為：在標籤中直接寫上圖片路徑，路徑會轉為 base64，但是如果通過變數設定靜態路徑，則不會轉為 base64，仍然顯示變數值對應的路徑，故圖片無法正常顯示。

• 正常業務開發中使用變數 require 引用靜態圖片路徑的場景並不多，更多的則是靜態圖片直接在標籤中引入或者直接引用網路路徑來展示圖片。