Theme Image resource doesn't load in production mode

So I have a custom theme with certain variables in my styles.css, one of which being a CSS variable for a loading animation SVG file. This works fine when running in developer mode, but when running in production mode, the browser can’t get the resource from the server and fails with “Failed to load resource: the server responded with a status of 404 ()”

Is there anything I have to do to make those images work in production mode?
They are currently located inside “themes/mytheme/images” right next to my styles.css file.

The CSS property:

--miku-loading: url(images/loading.svg);

How I use it:

.manga-page {
  height: 100%;
  width: auto;
  /*This doesn't load when in production mode*/
  background: var(--miku-loading) no-repeat center center;
  object-fit: contain;
}

Where did you place the images in your project?

I placed it under “projectDir/frontend/themes/mytheme/images”, but thanks to your link I was able to fix the issue by placing it into the "resources/META-INF/resources/images " directory instead. My IDE now shows it as an error, but I guess that’s just how it is. I’ve looked where to place them in the theming section, but didn’t find anything there, so I assumed I must be doing something wrong. Thanks for your help <:miku_happy:854009149514842122>

They should work in the theme folder too, though. Not sure why they would not

Here’s a section about images and such in the Styling section of V24 docs: https://vaadin.com/docs/latest/styling/application-theme#images-fonts (Don’t know which version you’re on though)