0

In my React ("react": "^18.2.0") App I display Images in a Material UI MUI v5 CardMedia Component like so:

<CardMedia
    component="img"
    width="100%"
    src={process.env.PUBLIC_URL + "/Images/Light/MyImage.png"}
    //src={".\Images\Light\MyImage.png"} // tried this as well
    alt="Some alt description."
    sx={{
        objectFit:"contain"
    }}
/>

I have 6 cards in total but only 2 images show up in production (deployed on heroku).

enter image description here

Running locally everything works fine. When I replace the 4 that don't show up with those that do show up, all images are loading (but I have 3 copies of the same 2 cards of course).

All images come from the same folder, they have about the same size (~100KB) and a fairly similar name. I don't see any errors in the console and when inspecting the page in the network tab the status code for the missing images is Status Code: 200 OK as well. The alt prop of the image also does not show up next to the broken image icon (see screenshot).

What can be the reason? I have no clue what I should be looking for ):

Thanks!

Edit: I created the app with create-react-app and my images are placed inside the public folder. When I put them inside the src folder and include like so it works:

<CardMedia
    component="img"
    width="100%"
    image={require('./Images/MyImage.png')}
    alt="Some alt description."
    sx={{
        objectFit:"contain"
    }}
/>

But having static files in the src folder is not exactly best practice I assume.

smaica
  • 723
  • 2
  • 11
  • 26
  • Its possible the `content-type` of the response is set wrong on the server. On the network tab, for the broken images, check the response header `content-type` and report back what it is. Also worth checking the `preview` tab for those requests to see if you see the same issue there. – adsy Jan 14 '23 at 23:23
  • Also ensure that the case of the letters in the `src` (both the filename and folders) matches perfectly that of the actual files. Some filesystems are case sensitive whereas others are not. – adsy Jan 14 '23 at 23:24
  • Hi adsy, thanks for your help! I checked the content-type. You were right, for some reason it says `text/html; charset=UTF-8` for those images that are not displayed and correctly `image/png` for those, that are displayed. How can I force the correct content type? Preview does not show anything for those images that are not displayed and I checked on the filename and path, there everything matches perfectly (also the cases). – smaica Jan 15 '23 at 09:27
  • What is your server technololgy? Are you using express or similar? Maybe nginx? This is quite odd when coupled with that they give a 200, since usually unexpected HTML mime type would be because the server is returning an error page (like "not found") - but you mention preview shows nothing, which is strange. I would need to see the server code that serves the static assets. – adsy Jan 15 '23 at 13:57
  • I think I did not mention, that I put my files in the public folder. Sorry for that. I added it to my question. I created the app with create-react-app so everything in my public folder gets served automatically. How exactly unfortunately I don't know. I have a server backend for all my data. It's using express. Is it necessary that I move my static files to that server? – smaica Jan 16 '23 at 06:26
  • By the way, I was able to show the images when I put them in the src folder inside the components folder. But that's not exactly best practice, or? – smaica Jan 16 '23 at 06:26
  • If you know the URL ahead of time, which it appears you do, the way you posted is far better and preferable. Usually, public folder is for stuff which isn't actually connected to the primary bundle. So this solution is fine! I think there's probably some issue still somewhere with your web server configuration on public folder but it doesn't matter now :). – adsy Jan 16 '23 at 13:59
  • Alright, awesome. Then I'll just go with this solution. Thanks a lot! – smaica Jan 17 '23 at 14:09

0 Answers0