I'm quite sure that this is related to how webpack works with MUI.
We used to have a div with a class that had a background-image:
.hero-image {
// .. stuff
background-image: url("../../assets/images/hero-images/yoda.jpg")
// .. more stuff
}
That ain't the most MUI-y, component-y way of doing things so I wanted to use a (MUI) CardMedia, as per the examples on Card:
<CardMedia
sx={{ height: '100%' }}
image="assets/images/hero-images/yoda.jpg"
title="yoda"
/>
No image appears and I see this in the console:
GET http://localhost:3000/assets/images/hero-images/yoda.jpg 431 (Request Header Fields Too Large)
I've tried adding url before the URL as per the original background-image definition, as well as tried different varieties of quotes.
No luck.
When I checked the actual url in the browser for the version using a div I saw
background-image: url(http://localhost:3000/static/media/yoda.850fd76….jpg);
So clearly some asset manager is doing a transformation. This lead me to webpack.
I feel like I'm getting closer but I'm still not sure.
How is MUI supposed to work with webpack? I'm sure I'm missing something, as I can't be the first person to use this combo of tools 😔.
requirethe image:const heroImage = require('../../assets/images/hero-images/yoda.jpg');