图像未显示在 AWS 放大中

Question

I build a simple app using React, React-Router and Webpack, and after deploying it AWS amplify, it fails to load up images.

Fonts load correctly in amplify. No errors show up in the console.

Locally, everything works perfectly.

Directories

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

Current 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',
}; 

Rewrites and redirects : I guess the problem is here, I looked in the docs, couldn't find any help..

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

If you need more info please ask.

Any ideas of what could be going on?

Answer 1

My webpack conf was wrong. Note how the dev server points to src instead of build/dist:

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

Once I changed that I had the same problem in Local. to solve it I added the CopyWebpackPlugin , which solved the issues both locally and online.