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

Posted 2023-02-22

【中文标题】Vue.js 动态图像路径未加载

【英文标题】：Vue.js dynamic image paths not loading

【发布时间】：2018-08-23 17:14:29

【问题描述】：

我正在尝试在单个文件组件中动态加载图像，但我收到一个错误，即找不到该模块。我想我正在尝试做与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 函数的问题。任何帮助表示赞赏，谢谢！

【问题讨论】：

你有那个 JS 代码的文件（路径）在哪里？

@acdcjunior 这都在位于/src/components/JobList.vue的单个文件组件中

【参考方案1】：

在我看来，当 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 url（取决于图标的加载方式）：

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

【参考方案2】：

考虑到您的 javascript 代码位于 /src/components/JobList.vue，而您的图像位于 /src/assets/，请按如下方式使用：

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

【讨论】：

你可以试试硬编码吗？您确定存在的某些文件，例如/src/assets/my-icon.png，您进行硬编码，例如：<img :src="getIconPath('my-icon.png')"/>。

如果它不起作用，你能粘贴整个堆栈跟踪（不仅仅是第一行）吗？它包含重要信息。

根据您的建议尝试使用硬编码的图标名称。我不确定它的确切原因，但我将 JSON 图标路径设置为“icon-name.png”，而不是在 require 函数调用中添加 .png。