Question

我正在尝试在单个文件组件中动态加载图像，但是我收到一个无法找到该模块的错误。我想我正在尝试和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函数的问题。感谢任何帮助，谢谢！

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"/>

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

2 个答案: