javascript - Vue.js动态图像路径未加载

我正在尝试在单个文件组件中动态加载图像，但是却收到一个错误消息，即找不到该模块。我认为我正在尝试做与this SO post相同的操作，但是我不确定自己做错了什么。我使用webpack template设置了我的项目。

这是我模板中的相关标记:

<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函数问题。任何帮助表示赞赏，谢谢!

最佳答案

考虑到您的JavaScript代码在/src/components/JobList.vue上，而图像在/src/assets/上，请按以下方式使用:

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