SVG 和 PNG 未加载答案

【问题标题】：SVGs and PNGs not loadingSVG 和 PNG 未加载
【发布时间】：2022-12-12 10:15:37
【问题描述】：

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

而且我有一个问题，我的所有本地 SVG 和 PNG 都没有被 Webpack5 React 应用程序加载。这样做时我一直收到 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" />
  )
}

【问题讨论】：

您是否在开发人员工具中看到任何错误？请在您的问题中包含确切的错误消息（复制/粘贴）
@phuzi 我收到 404 NOT FOUND 错误，我附上了上面的图片。
不要使用相对路径。将您的 assets 文件夹移动到 public 文件夹，然后将您的图像引用为 src="/assets/Logo.svg"。参见nextjs.org/docs/basic-features/static-file-serving。

标签： reactjs webpack webpack-4 webpack-5

【解决方案1】：

我不是 React 方面的专家，但是对于在 App.js 中呈现的应用程序，也许您的 url img src 应该类似于 src='./components/assets/ 因为它会从 src 文件夹开始？（我知道如果它是一个导入它按预期工作但这里它是一个 src ..）

随意删除我没有足够的业力来评论

【讨论】：