在 HTML (webpack) 上找不到图像答案

【问题标题】：Image not Found on HTML (webpack)在 HTML (webpack) 上找不到图像
【发布时间】：2021-10-12 16:25:04
【问题描述】：

我正在尝试显示图像：

<img class="header__logo" src="src\assets\image.png" alt="Logo">

项目：

/node_modules
/src
|- /assets
  |- image.png
|- /scss
|- app.js
|- index.html
pakckage.json
webpack.config.js

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: path.join(__dirname, './src/index.html'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      }
    ],
  },
  devServer: {
    port: 8600
  }
};

我不知道发生了什么，因为我有其他具有相同配置的项目并且它们正确显示图像。

谢谢！ :D

【问题讨论】：

asseets -> 错字？
是的，我编辑了它

标签： html css webpack

【解决方案1】：

您正在尝试使用转义字符（即反斜杠\）链接图像。

如果您将它们替换为常规正斜杠 (/)，您的问题可以解决，如下所示：

<img class="header__logo" src="src/assets/image.png" alt="Logo">

【讨论】：