Next.js Discord

Discord Forum

Using an SVG as a background in CSS modules

Siamese Crocodile posted this in #help-forum
Open in Discord
Siamese CrocodileOP
I have an svg file called Rays.svg
In the same folder is styles.module.css which contains:
.example {
    background-image: url(Rays.svg);

When I use this class, I don't see my background SVG. When I view it in my web inspector, it looks like this:

.styles_example__7yd5t {
  background-image: url(/_next/static/media/Rays.f72a6a17.svg)

When I visit that URL I get this:

This page contains the following errors:
error on line 1 at column 1: Start tag expected, '<' not found
Below is a rendering of the page up to the first error.

A file is generated in my project here:

It contains JavaScript that creates an SVG element.

Is there something I should do so that it loads the SVG normally without transforming it into JavaScript?

6 Replies

move Rays.svg to public
Siamese CrocodileOP
That does work around the problem, yes, but isn't this still a bug? It's recognizing the reference to the SVG file but doing the wrong thing with it.
No it’s working as intended. Image files have a custom loader to support this kind of syntax

import image from "./image.png";

<Image src={image} />
<img src={image.src} />

Here image is a JavaScript object with relevant metadata info for next/image.
If you want to specify the path in a css file, just use public
Or depending on the use case, it might be better to inline the image as eg base64 inside the css file, or use <Image /> for background images
Siamese CrocodileOP
Thanks for the explanation. However it doesn't change the fact that this is an automatic behavior of CSS modules and it'd be nice if it did something more logical...