尝试使用我自己的 webpack 配置在 .vue 文件中获取本地图像时出错

Posted 2023-02-22

【中文标题】尝试使用我自己的 webpack 配置在 .vue 文件中获取本地图像时出错

【英文标题】：Error trying to get local images in .vue files with my own webpack config

【发布时间】：2020-04-07 03:10:33

【问题描述】：

真正的事情是我正在学习 webpack 并尝试创建自己的 vue 模板 但是我遇到了这个在 webpack-simple 或其他模板中不会发生的问题，而且我的图像配置与模板通常使用的配置非常相似。

    test: /\.(png|jpe?g|gif)$/i,
    use: 
        loader: 'file-loader',
        options: 
            name: '[name].[ext]',
            outputPath: './assets/',
        ,
    ,

我收到以下错误

http://localhost:8080/[object%20Module]404（未找到）

当我尝试在 App.vue 中获取徽标时

<template>
    <img src="./assets/logo.png"/>
</template>

事实是，当我使用他的“依赖”名称或 webpack 给出的哈希时，图像被正确调用。

但是 vue 文档说像我一样调用必须像在 webpack-simple 模板中一样工作，因为调用将由 webpack 解析。

我不知道它是否有帮助，但我可以使用 import img from './assets/logo.png' 导入路径中的 img ，只需使用我遇到此问题的模板中的 html。

【问题讨论】：

使用<img src="~./assets/logo.png"/>有帮助吗？

不，同样的错误：/

【参考方案1】：

解决了这个变通办法，只需在文件加载器中禁用 esModule

https://github.com/vuejs/vue-loader/issues/1612