在生产模式中找不到ReactJs图像

Question

我已经在回购上推送了我的应用程序。

图像导入到路径：

react-blog-app/blob/gh-pages/static/media/_resized_300.353f8ae3.jpg

但是在页面上找不到图像。URL指向

react-blog-app/static/media/_resized_300.353f8ae3.jpg

我在config.json 上添加了"contentBane">

{
"apiEndpoint": "https://jsonplaceholder.typicode.com/posts"   ,
"devServer": {
"contentBase": "./build"
}

}

你有什么建议来解决这个问题吗？

提前谢谢。

Answer 1

我认为您没有将文件加载器添加到module.rules中。下面的代码是react应用程序的最小webpack配置。

webpack.config.js

require("dotenv").config();
const path = require("path");
const webpack = require("webpack");
// Plugins
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: process.env.NODE_ENV || "production",
entry: "./src/index.jsx",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
resolve: { extensions: ["*", ".js", ".jsx"] },
// externals: {
//   "react-js": "React",
//   "react-dom": "ReactDOM"
// },
module: {
rules: [
{
test: /.(js|jsx|es6|es|mjs)$/,
include: path.resolve(__dirname, "src"),
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /.html$/,
use: ["html-loader"]
},
{
test: /.css$/,
use: [
"style-loader",
"css-loader",
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.ejs",
filename: "index.html",
title: "My React App",
inject: "body",
scriptLoading: "defer",
cache: true
}),
new webpack.ProgressPlugin()
],
devtool: "source-map",
devServer: {
hot: true,
port: 8000,
open: true
}
};

.babelrc

{
"presets": ["@babel/preset-react"],
"env": {
"development": {
"presets": [["@babel/preset-react", { "development": true }]]
}
}
}

package.json

"scripts": {
"start:dev": "cross-env NODE_ENV=development "webpack-dev-server"",
"build": "webpack"
}