html-loader 无法识别 html 中的 img 标签答案

【问题标题】：html-loader not recognising img tags in htmlhtml-loader 无法识别 html 中的 img 标签
【发布时间】：2020-02-23 17:17:07
【问题描述】：

我正在尝试使用 webpack 捆绑应用程序，并且我正在使用带有文件加载器的 html-loader 将图像捆绑到 dist 目录中的“imgs”文件夹中（这没有发生）。

我已尝试将图像导入到其中一个 javascript 入口点，这工作正常，文件加载器识别图像并正确捆绑它。

文件系统：

从 package.json 构建脚本和依赖项：

 "build": "webpack --config webpack.prod.js"

 "dependencies": {},
  "devDependencies": {
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "glob": "^7.1.5",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.9.0",
    "webpack-merge": "^4.2.2"
  }

webpack.prod.js：

const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "main.[contentHash].js",
    path: path.resolve(__dirname, "dist")
  },
});

webpack.common.js：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const glob = require("glob");

module.exports = {
  entry: glob.sync("./src/scripts/*.js"),
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.html$/,
        use: {
          loader: "html-loader",
          options: {
            attrs: [":data-src"]
          }
        }
      },
      {
        test: /\.(svg|png|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "imgs/"
          }
        }
      }
    ]
  }
}

来自模板.html：

            <div class="home-screen">
              <div class="app-container">
                <div>
                  <img width="54" height="54" data-name="calculator" src="/src/assets/calc-icon.png"></img>
                  <p>Calculator</p>
                </div>
                <div>
                  <img width="54" height="54" data-name="video-player" src="/src/assets/video-player-icon.png"></img>
                  <p>Video Player</p>
                </div>
                <div>
                  <img width="54" height="54" data-name="temp-converter"
                    src="/src/assets/temp-converter-icon.png"></img>
                  <p>Temperature Converter</p>
                </div>
                <div>
                  <img width="54" height="54" data-name="color-game" src="/src/assets/color-game-icon.png"></img>
                  <p>Color Game</p>
                </div>
                <div>
                  <img id="camera-icon" width="54" height="54" data-name="camera-app"
                    src="/src/assets/camera-icon.png"></img>
                  <p>Camera</p>
                </div>

因此，当我运行 npm run build 时，我希望 dist 目录包含 index.html、main.js 和包含我的图像的 imgs 文件夹，但 imgs 文件夹根本不会显示没有错误消息指出原因。任何帮助将不胜感激。

【问题讨论】：

标签： webpack

【解决方案1】：

您正在为您的 src 文件夹中的 template.html 文件中的图像引用“/src/assets/”。因此，当与您的基本目录进行比较时，它正在寻找不存在的 /src/src/assets/。

修改src/template.html里面的img src属性，用“./assets”代替“/src/assets”来解决问题。

【讨论】：

就是这样！非常感谢！