SVG 和 PNG 未加载

Question

我正在使用 Webpack 开发微前端。

我有一个问题，Webpack5 React 应用程序没有加载所有本地 SVG 和 PNG。当我这样做时，我总是收到 404。

任何人都可以指出我做错了什么吗？

这是文件夹结构

/public
/src
 /components
   navbar.tsx
   /assets
     Logo.svg
webpack.config.js

这是我的 Webpack 配置。我包括资产加载器，如 Webpack 文档中所示

Webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

const deps = require("./package.json").dependencies;
module.exports = {
  output: {
    publicPath: "http://localhost:3000/",
  },

  resolve: {
    extensions: [".vue", ".tsx", ".ts", ".jsx", ".js", ".json"],
  },

  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\.m?js/,
        type: "javascript/auto",
        resolve: {
          fullySpecified: false,
        },
      },
      {
        test: /\.(css|s[ac]ss)$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "App1",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],
};

这是导航栏中导入的图像之一。

导航栏.tsx

import React from "react";

export default function Navbar() {
  return (
    <img src="./assets/Logo.svg" alt="Logo" />
  )
}

Answer 1

在 App.js 中渲染应用程序后，您的 url img src 可能应该类似于

src='./components/assets/

，因为它会从 src 文件夹 l 开始？ （我知道它是否是一个导入，它会按预期工作，但这里它是一个 src ..）