在 javascript 文件中导入 .jpg 文件时无法加载模块脚本

Question

我只是想在 javascript 文件中导入图像来测试 webpack 资产。当我在 VS-Code 中启动 Live Server 扩展时，我应该会看到图像，但我收到以下错误：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello world!</title>
  </head>
  <body>
    <script type="module" src="./src/index.js"></script>
  </body>
</html>

index.js

import tech2 from "./tech2.jpg";

function addImage() {
  const img = document.createElement("img");
  img.alt = "Tech.";
  img.width = 300;
  img.src = tech2;
  const body = document.querySelector("body");
  body.appendChild(img);
}

addImage();

webpack.config.js:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
  },
  mode: "none",
  module: {
    rules: [
      {
        test: /\.(jpg|png)$/,
        type: "asset/resource",
      },
    ],
  },
};

身上什么都没有！:

Answer 1

Webpack 具有可以将 import 指向图像文件并将其转换为 URL 的功能。浏览器无法做到这一点，您唯一可以使用 import 在浏览器中加载的是 JavaScript 模块。

您有一个 Webpack 配置，但您没有使用它。

你说你使用的是 VS Code Live Server
浏览器中的 url 指向 src 而不是 dist （因此您不是运行 webpack 手动构建管道并使用结果）。

如果您想在开发时使用 Webpack，请使用 the Webpack dev server 而不是 VS Code Live Server 扩展。

在 javascript 文件中导入 .jpg 文件时无法加载模块脚本

Failed to load module script when importing a .jpg file in a javascript file

javascript

mime

mime-types

ecmascript-6

webpack