帶有 webpack require() 的 Vue.js 動態圖像 src 不起作用

Question

我正在嘗試將圖像 src 動態綁定到../assets/project_screens/image_name.jpg形式的 URL。

我的目錄結構如下：

- src
 -- assets
   ---- project_screens
 -- profile
   ---- ProjectList.vue 
 -- store
   ---- profile.js

我知道我需要使用 webpack 的require("path/to/image")來幫助 webpack 構建這些圖像，但是路徑沒有解析。

// store/profile.js
projects = [
  {
    ....
  },
  {
    ....
    img_url: "../assets/project_screens/im1.jpg"
    ....
  }
  ....
]

// profile/ProjectList.vue
<md-card
   class="md-layout-item project-card"
   v-for="(project, idx) in projects"
   :key="idx"
 >
    <md-card-media>
        <img :src="require(project.img_url)" alt="People" />
    </md-card-media>
</md-card>

如果我使用 URL 字符串而不是動態傳遞 URL 字符串，它會起作用。 環顧堆棧溢出，沒有任何解決方案有幫助。 我還缺少其他東西嗎？

Answer 1

我終於想通了！！ 如果文件名稱完全以變量形式給出，則 Webpack 無法導入文件，例如：

require(imageUrl) // doesn't work

這是因為如果路徑存儲在變量中，它在編譯時不知道路徑。

但是 Webpack 可以在 require() 中給定字符串插值時檢測要捆綁的文件，例如：

require(`../assets/profile_screens/${filename}`) // Works

這是有效的，因為 Webpack 在編譯時知道路徑“../assets/profile_screens”，因此它可以包含文件夾中的所有文件。

Answer 2

下面的語法對我有用：

<img :src="`${project.img_url}`" alt="People" />

它適用於完整的網址。

require()不是必需的。