未找到 React / Webpack 本地图像答案

【问题标题】：React / Webpack local images are not found未找到 React / Webpack 本地图像
【发布时间】：2023-03-20 16:04:01
【问题描述】：

React / Webpack 本地图像未加载。错误：加载资源失败：服务器响应状态为404（未找到）

我的图像没有加载到我的 react 应用程序中。几个小时的故障排除，我仍然卡住了，我很感激你们的任何建议。我相信问题出在我的 webpack 配置中。

我的项目结构：

frontend
├── src
│   ├── components
│     └── Header.js
├── static
│   ├── frontend
|        └── index.html
|        └── index.css
|        └── favicon.ico
│        └── images
|            └── BendingFigure.png
├── package.json
├── package-lock.json
├── babel.config.json
└── webpack.config.js

Header.js 包含这行代码

<img src="../../static/frontend/images/BendingFigure.png" />

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>Freestand</title>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="index.css" />
        <link rel="shortcut icon" href="favicon.ico">
        
    </head>
    <body>
        <div id="main">
            <div id="app"></div>
        </div>

        <script src="main.js"></script>
    </body>
</html>

Webpack 配置

const path = require("path");
const webpack = require("webpack");
const DEVELOPMENT = process.env.NODE_ENV === "development";
const PRODUCTION = process.env.NODE_ENV === "production";
const PUBLIC_PATH = "/static/frontend/";
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "main.js",
    publicPath: PUBLIC_PATH,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: "file-loader",
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  devServer: {
    port: 8080,
    contentBase: path.join(__dirname, "./static/frontend/"),
    publicPath: PUBLIC_PATH,
    inline: true,
    hot: true,
    historyApiFallback: true,
  },

  plugins: [
    new webpack.DefinePlugin({
      "process.env.PRODUCTION": JSON.stringify(PRODUCTION),
      "process.env.DEVELOPMENT": JSON.stringify(DEVELOPMENT),
    }),
  ],
};

我尝试更改图像路径但没有成功，也没有将文件加载器规则添加到 webpack 配置中。我认为我的问题与 webpack 配置中的公共路径有关。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

  devServer: {
    contentBase: // where you've output your files
    contentBasePublicPath: '/',
    publicPath: '/'
  }

确保您的PUBLIC_PATH 环境变量实际上与您的输出目录相同，在本例中为/。

然后只使用src='/images/example.jpg' 调用您的图像，而无需其他所有操作。

【讨论】：

【解决方案2】：

由于您的网站根目录基本上位于 static/frontend（这是您的 index.html 所在的位置），因此您的图片 URL 应该与该文件夹相关。在这种情况下，这意味着使用例如./images/BendingFigure.png.

我还建议阅读 Webpack 的 Asset Management guide，因为它基本上允许您在代码中“导入”图像。您实际上不会导入图像，而是它的公共 URL。然后，图像将与您的输出目录中的捆绑代码一起输出。

【讨论】：

嗯，尝试将 img src 更改为那个，但它不起作用。