尝试使用我自己的 webpack 配置获取 .vue 文件中的本地图像时出错 [英] Error trying to get local images in .vue files with my own webpack config

问题描述

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

The real deal is that I’m learning webpack and trying to create my own vue template but I’m getting this issue that not happens in webpack-simple or others templates, and my config for images is pretty similar to what is normally used by templates.

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

我收到以下错误

http://localhost:8080/[object%20Module] 404(未找到))

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

When I try to get the logo in App.vue

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

事实是，当我使用他的依赖"名称或 webpack 给出的哈希值时，图像被称为正确的.

A fact is that when I use his "dependency" name or hash given by webpack the image is called right.

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

But the vue docs say that calling as I do has to work as work like in webpack-simple template since the call will be parsed by the webpack.

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

I don’t know if it helps, but I can import the img from path with import img from './assets/logo.png' just with the HTML in template that I get this problem.

推荐答案

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

solved with this workaround, just disable esModule in file-loader

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

这篇关于尝试使用我自己的 webpack 配置获取 .vue 文件中的本地图像时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！