【Vue】Vue Cli 項目中通過 require 引入靜態圖片路徑的解釋

關於 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 引用靜態圖片路徑的場景並不多，更多的則是靜態圖片直接在標簽中引入或者直接引用網絡路徑來展示圖片。