Vue.js動態圖像路徑未加載

Question

我試圖在單個文件組件中動態加載圖像，但是卻收到一個錯誤消息，即找不到該模塊。 我想我正在嘗試執行與此SO post相同的操作，但是我不確定自己在做什么錯。 我使用webpack模板來設置我的項目。

這是我模板中的相關標記：

<router-link :to="{ name: 'JobsDetail', params: { slug: job.slug } }">
    <span class="icon">
        <img :src="getIconPath(job.slug)"/>
    </span>
    {{ job.title }}
</router-link>

我正在嘗試從中獲取圖像的功能：

methods: {
    getIconPath (iconName) {
        const icons = require.context('../assets/', false, /\.png$/)
        return iconName ? icons(`./${iconName}.png`) : ''
    }
}

我在/src/assets/目錄中有圖像。 我在瀏覽器控制台中遇到的錯誤是：

[Vue warn]: Error in render: "Error: Cannot find module './some-icon.png'."

我不確定這是webpack配置問題還是getIconPath函數問題。 任何幫助表示贊賞，謝謝！

Answer 1

考慮到您的JavaScript代碼位於/src/components/JobList.vue而圖像位於/src/assets/ ，請按以下方式使用：

methods: {
    getIconPath (iconName) {
        return iconName ? require(`../assets/${iconName}`) : ''
    }
}

Answer 2

在我看來，當webpack內置在dev或prod中時，圖像之類的靜態資產應該轉為/ static。

查看配置文件： vuejs-templates / webpack / blob / develop / template / config / index.js ，您將具有以下配置（前提是您未進行任何更改）：

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',

所以src可能應該是這樣的：

<img src="/static/whatEverMyIconIs.png"/>

編輯：

進一步查看配置，在vuejs-templates / webpack / blob / develop / template / build / webpack.base.conf.js中 ，有一個url-loader插件，應將圖像放入/ static / img：

 {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },

這可能會使您的src網址（取決於圖標的加載方式）：

<img src="/static/img/whatEverMyIconIs.png"/>