Question

希望这能快速解决。

目标：我想通过 scss 中的 url 添加图像，并在成功编译后在 dev-server localhost 中看到它们。

问题：我可以设置绝对路径并且 webpack 没有给我任何错误，我通过 url 包含的图像成功通过文件加载器并进入“/assets/images/”下的“../dist”文件夹。在“npm run dev”编译之后，我运行 dev-server 打开一个本地主机，我可以成功地对 html、scss 和 js 进行实时更改，并且它可以毫无问题地呈现，现在，唯一的问题是有关图像的某些内容不正确，因此是图像未显示。

我尝试了许多解决方案来以不同的方式更改路径，在编译后的“main.css”中，图像路径与我在 scss 中键入的路径相同，但缺少“./”以获得正确的路径。不幸的是，当我尝试在 url 图像地址前添加点时，出现编译错误。我被这个问题困住了，非常感谢您提供的任何帮助。

我附上了几张截图：

https://i.stack.imgur.com/5AfzQ.png [Webpack 配置]

https://i.stack.imgur.com/loWQ8.png [文件加载器]

https://i.stack.imgur.com/CErdq.png [home.scss]

https://i.stack.imgur.com/qJfLz.png [index.js]

https://i.stack.imgur.com/6E1jt.png 【左侧编译好的html和文件结构】

https://i.stack.imgur.com/IPupt.png [localhost 有一些错误]

https://i.stack.imgur.com/eZwSZ.png [资产结构]

Answer 1

想通了，我不得不在 webpack.config.js 文件中指出一个正确的地址，因此我的文件加载器配置现在是：

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

Webpack url 图像不会显示在开发服务器本地主机中

1 个答案: