I had tried with a relative url previously and the request was going for the base64'd version. It works only if I use the full URL. I didn't want to hardcode the URL.
Anyways, thanks!
the difference between url('/img/bg.svg') and url("../img/bg.svg") is that the former is an absolute path and will always refer to the same resource the latter is a relative path and the resource it refers to will change depending on the URL of the page that makes the request.
I had tried with a relative url previously and the request was going for the base64'd version. It works only if I use the full URL. I didn't want to hardcode the URL.
Anyways, thanks!
what was your CSS? you should be using a URL not
data:
This doesn't work:
But this does:
I just don't want to hardcode the URL
Try
url('/img/bg.svg')
, not sure if that will work though.I don't see the difference between your snippet and mine 😅.
I know my relative URL is right, because without CSP it works fine.
What’s your CSP?
the difference between url('/img/bg.svg') and url("../img/bg.svg") is that the former is an absolute path and will always refer to the same resource the latter is a relative path and the resource it refers to will change depending on the URL of the page that makes the request.
For example if the page making the request is example.com/page/content/index.html then '/img/bg.svg' will look for the SVG at example.com/img/bg.svg whereas '../img/bg.svg' will look for the SVG at example.com/page/img/bg.svg