Using an SVG as a background in CSS modules
Unanswered
Siamese Crocodile posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
Siamese CrocodileOP
I have an svg file called
In the same folder is
When I use this class, I don't see my background SVG. When I view it in my web inspector, it looks like this:
When I visit that URL I get this:
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?
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:
.next/static/media/Rays.f72a6a17.svg
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
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/f386ac21405ce3442e0f3598223e1cb3.webp?size=256)
joulev
move
Rays.svg
to public
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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.
![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/f386ac21405ce3442e0f3598223e1cb3.webp?size=256)
joulev
No it’s working as intended. Image files have a custom loader to support this kind of syntax
Here
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
![Avatar](https://cdn.discordapp.com/embed/avatars/1.png)
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...