Images in css

I’m having trouble using an SVG in CSS.

I’m using sage 10. Following this:

I have this CSS:

            .submit-search:after {

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, which doesn’t exist.

What am I doing wrong here?

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

You can use the bud alias feature for this:



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

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;
1 Like

Got it, makes sense. Thanks so much!