Django webpack не загружает изображения из статических файлов

Я в процессе создания сайта с использованием django и react. Я использую рендеринг на стороне клиента в react, вместо того, чтобы обрабатывать все url в django, и я наткнулся на проблему невозможности обновлять страницы по url, отличным от базового url. Насколько я понял, самым простым решением является webpack и его historyApiFallback. В любом случае, теперь, когда я настроил webpack, historyApiFallback не работает, и мои статические изображения больше не загружаются... Надеюсь, кто-нибудь сможет мне помочь, мне это очень нужно.

webpack.config.js

const path = require("path");
const BundleTracker = require('webpack-bundle-tracker');
const HtmlWebpackPlugin = require("html-webpack-plugin");

var config = {
    context: __dirname,
    entry:  './src/index.js',
    output: {
        path: path.join(__dirname, 'assets/dist'),
        filename: "main.js",
        publicPath: '/'
    },
    devServer:{
        historyApiFallback: true

    },
    plugins: [
        new BundleTracker({ filename: './webpack-stats.json' }),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ],
    devtool: 'hidden-source-map',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'],

            },
            {
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
            test: /\.(png|jpg|jpeg|gif)$/,
            type: 'asset/resource',
            use: [
              'url-loader'
            ]
        },
        ]
    }
}

module.exports = () => {

    return config
};

settings.py

FRONTEND_DIR = os.path.join(BASE_DIR, 'frontend')
STATIC_URL = 'static/dist/'
STATIC_ROOT = os.path.join(FRONTEND_DIR, "assets/dist/")
STATICFILES_DIRS = (
    os.path.join(FRONTEND_DIR, "static/dist/"),
)

MEDIA_URL = '/Images/'
MEDIA_ROOT = os.path.join(FRONTEND_DIR, '/src/Images')

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'assets/dist/',  # must end with slash
        'STATS_FILE': os.path.join(FRONTEND_DIR, 'webpack-stats.json')
    }
}

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),
    re_path(r'^api/news/', views.news_list),
    path('api/news/<int:id>/', views.news_detail),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Вот как выглядят мои файлы: /assets/ - это место, куда попадает пакет webpack, а /static/ - это publicPath. Это прекрасно работает с моими js файлами и css файлами, они все правильно подхватываются из /static/dist. Однако мои изображения загружаются из /assets/dist/, и я получаю 404 ошибку на все из них. У меня также есть изображения, загруженные через модели, и они работают нормально... Дайте мне знать, если мне нужно добавить еще какие-либо файлы/информацию, и заранее спасибо! Также, если кто-нибудь знает, почему мой historyApiFallback не работает, пожалуйста, скажите мне...

Второе изображение - сообщение об ошибке, когда я пытаюсь получить изображение.

Вернуться на верх