Images in css

sage
1

I’m having trouble using an SVG in CSS.

I’m using sage 10. Following this:

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?

2

You can use the bud alias feature for this:

For SCSS:
https://discourse.roots.io/t/tip-bud-alias-bud-alias-in-scss-sass/24208

2 Likes
3

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

4

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
5

Got it, makes sense. Thanks so much!