Broken Images and Icons in Block Area After Build

[GuilhermeAGouveia]

Description:
I am encountering an issue where the images and icons in the block area appear broken after building the scratch-gui. The images are present in the dist/static/blocks-media folder, but they do not display correctly in the browser.

Steps to Reproduce:

1. Fork the scratch-gui repository.
2. Clone the repository to the local machine.
3. Run npm install to install dependencies.
4. Run npm run build to build the project.
5. Start the development server with npm start.
6. Open the project in the browser.

Expected Result:
The icons and images in the block area should be displayed correctly.

Actual Result:
The images and icons in the block area are broken (not displayed).

Environment Configuration:

• Operating System: [Your OS, e.g., Windows 10, macOS 11.2.3, etc.]
• Browser: [Browser name and version, e.g., Chrome 90.0.4430.212]
• Node.js: [Node.js version, e.g., v14.16.0]
• NPM: [NPM version, e.g., 6.14.11]

Webpack Configuration:
Here is the relevant Webpack configuration I am using:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const STATIC_PATH = process.env.STATIC_PATH || '/static';

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: `${STATIC_PATH}/`
    },
    module: {
        rules: [
            {
                test: /\.(svg|png|wav|mp3|gif|jpg)$/,
                loader: 'url-loader',
                options: {
                    limit: 4096,
                    outputPath: 'static/assets/',
                    publicPath: `${STATIC_PATH}/assets/`
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { from: 'node_modules/scratch-blocks/media', to: 'static/blocks-media/default' },
                { from: 'node_modules/scratch-blocks/media', to: 'static/blocks-media/high-contrast' },
                { from: 'src/lib/themes/high-contrast/blocks-media', to: 'static/blocks-media/high-contrast', force: true }
            ]
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: `${STATIC_PATH}/`,
        host: '0.0.0.0',
        port: 8601
    }
};

Debugging Steps Taken:

1. Verified that the images are present in the dist/static/assets folder.
2. Confirmed that the image paths are correct.
3. Tested the image URLs directly in the browser and received 404 errors.