I’m having trouble using an SVG in CSS.
I’m using sage 10. Following this:
I have this CSS:
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?
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 domain.com/~@images/icons/calendar.svg
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;
Got it, makes sense. Thanks so much!