AWS中未显示的图像会放大

Question

我使用React、React Router和Webpack构建了一个简单的应用程序，在部署它AWS放大后，它无法加载图像。

字体在放大中正确加载。控制台中没有显示任何错误。

在当地，一切都很顺利。

目录

my-app/
├─ build/
├─ node_modules/
├─ src/
│  ├─ assets/
│  │  ├─ some_img.png
│  ├─ index.css
│  ├─ index.js
├─ .gitignore
├─ package.json
├─ webpack.config.js

当前webpack conf:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const dotenv = require('dotenv').config({
path: path.join(__dirname, '.env')
});
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: path.join(__dirname, "src", "index.js"),
output: {
path: path.join(__dirname, "build"),
filename: "index.bundle.js",
publicPath: '/',
},
mode: process.env.NODE_ENV || "development",
resolve: {
alias: {
'../../theme.config$': path.join(
__dirname,
'/src/theme/theme.config',
),
},
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
devServer: {
contentBase: path.join(__dirname, "src"),
historyApiFallback: true,
},
module: {
rules: [
{
test: /.(js|jsx)$/i,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /.(css)$/i,
use: ["style-loader", "css-loader"],
},
{
test: /.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg|gif|mp3)$/i,
use: ["file-loader"]
},
{
test: /.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'less-loader',
],
},
{
test: /.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.parsed)
}),
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash].css',
}),
],
devtool: "source-map",
target: 'node',
}; 

重写和重定向：我想问题就在这里，我查了一下文件，找不到任何帮助。。

[
{
"source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]

如果您需要更多信息，请询问。

有什么想法吗？

Answer 1

我的webpack conf是错误的。注意dev服务器是如何指向src而不是build/dist:的

contentBase: path.join(__dirname, "src"),

一旦我改变了这一点，我在Local也遇到了同样的问题。为了解决这个问题，我添加了CopyWebpackPlugin，它解决了本地和在线的问题。