Including a PNG background image in custom CSS stylesheet

[michalc]

I'm including some custom styles using the style option at https://observablehq.com/framework/config#style

For the most part they work great, but I would like to include a PNG background image. If I try to include this in my stylesheet:

.my_class {
  background-image: url("my_image.png");
}

Then I get the error:

[ERROR] No loader is configured for ".png" files: src/my_image.png

How can I avoid the error / include PNG background images in my custom CSS?

[Fil]

Yes it's a know limitation. Tracked as #786 and with a PR (that still needs a bit more work) at #1372.

[michalc]

Ah understood!

I the meantime I figured out a workaround: avoiding using the style front matter key, and instead insert a link element that points to my custom stylesheet into the head key of the main config object.

[michalc]

Actually, I might have to take that back. The workaround seems to work when running npm run dev, but not when deployed.

[michalc]

But I have managed to get data URIs to work