Django webpack not loading images from static files - reactjs

Question

I'm in the process of making a website using django and react. I'm using client side rendering in react, instead of handling all the urls with django, and I stumbled upon the problem of not being able to refresh pages from urls other than the base url. From what I understood the easiest solution was webpack and it's historyApiFallback. Anyway, now that I've configured webpack, historyApiFallback doesn't work, and my static images will no longer load... Hopefully someone can help me out here, need it big time.
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)
This is how my files look like: /assets/ is where the webpack bundle ends up and /static/ is the publicPath. It works fine with my js files and css files, they are all fetched correctly from /static/dist. However, my images and being fetched from /assets/dist/ and I'm getting 404 errors on all of them. I also have images that are uploaded via models and those work fine... Let me know if I need to add any more files/info and thanks in advance! Also, if anyone knows why my historyApiFallback isn't working, please tell me...
Second image is the error message when i try to fetch the image.