images referenced in CSS?

[jrochkind]

I am having trouble figuring out how to succeed referencing local images in css, in a url().

I am using vite-ruby/vite-rails with rails.

Can anyone provide a working example? Where is a good place to put local images?

Do I need to somehow register them (or the directory they are in), so that vite will know to build and serve them? Or, wait... am I supposed to put them all in ./app/frontend/entrypoints? That seems a lot to me!

If this is documented somewhere I'm missing, feel free to link me!

[ElMassimo]

Whenever an asset is referenced using url in CSS or imported from JS, Vite will fingerprint it and include it in the build.

Nothing special is required for referencing images inside CSS files, but I highly recommend using the default import aliases or your own import aliases to reference them:

.background {
  background-image: url('@/images/bg.png');
}

The reason I recommend using aliases, and the @ prefix in particular, is that it works across pre-processors, and Vite will always detect and transform it correctly.

---

On the other hand, if you want to reference assets using tag helpers, Vite needs to know that it should process them somehow.

A good location to place images is app/frontend/images, which is included by default in additionalEntrypoints:

<%= vite_image_tag 'images/logo.jpg' %>

See this section for an in-depth explanation.

[jrochkind]

Thank you! And speedier than expected response, as usual!

So, I have gotten it to work by putting the images in ./app/frontend/entrypoints/images, but I agree that's kind of messy and ./app/frontend/images would be better. Let me see if I can figure out what was going wrong there from your instructions.

Aha!

If it is in ./app/frontend/entrypoints/images/x.png, then it can be referenced as simply url(images/x.png), without the @. But putting it in ./app/frontend/images/x.png instead, it needs the @, url(@/images/x.png).

Does that make any sense? That's fine now that I see it. I guess I should really get in the habit of using @ everywhere, I guess it doesn't hurt even in places it isn't required.