Images in css

[sundanlotion]

I’m having trouble using an SVG in CSS.

I’m using sage 10. Following this:

Compiling Assets | Sage Docs

I have this CSS:

            .submit-search:after {
                content:url('../images/icons/search.svg');
            }

and I have an image at resources/images/icons/search.svg

I don’t get an error running yarn dev (but i do if i change the pathname to a non-existent image), which indicates to me tat the image exists just fine on the server.

When I load the page, however, dev tools says that it’s looking for an image at domain.com/images/icons/search.svg, which doesn’t exist.

What am I doing wrong here?

And does anyone know the correct way to include an image in JS?

[strarsis]

You can use the bud alias feature for this:

bud.alias | bud.js

For SCSS:

[Tip] Bud alias (`bud.alias`) in SCSS (SASS)

When using bud.alias with SCSS (SASS) (bud-sass), you can use the alias functions by prefixing them with a tilde sign (~), like so (note: ~@images used in the example is a predefined alias added by @roots/sage): .test { background: url("~@images/background/test.jpg"); } Without that tilde sign (~) the path isn’t correctly interpolated when compiling the SCSS.

[sundanlotion]

This is great, works for the scss file! But in the JS, it doesn’t seem to work the same.

        img_calendar.src = '~@images/icons/calendar.svg';

this translates to domain.com/~@images/icons/calendar.svg

[strarsis]

For non-SCSS it should be without the tilde (~), so just @images/icons/calendar.svg (as it was described here).

Edit: Oh, I notice that you dynamically use that asset. You should rather import it so the resource can be resolved at build time (based off this example):

import calendarIcon from '@images/icons/calendar.svg';

img_calendar.src = calendarIcon;

[sundanlotion]

Got it, makes sense. Thanks so much!