Why is css url() function mangling my path?

Question

In my react app I'm using setting the style of a div to

{ backgroundImage: "url(file://f:/images/0/22.jpg)" }

but it throws a ERR_FILE_NOT_FOUND error with a very strange url such as

file:///F:/images%EF%BF%BD%22.jpg.

Ordinary relative paths to images without file:// work fine and if I copy the path, printed from console, into the inspector it works fine too.

I can't figure out when this transformation happens but prints of the url I'm using in my react component are fine.

Have you tried it with three slashes after the colon? `file:///f:/images/0/22.jpg` — Kevin Boucher, May 04 '18 at 20:11
This might help: https://stackoverflow.com/questions/6401865/css-background-image-url-failing-to-load — Kevin Boucher, May 04 '18 at 20:11
Indeed yes, I believe I changed it to two while just trying random things to get it to work. — BlisterFingers, May 04 '18 at 20:35

score 0 · Accepted Answer · answered May 04 '18 at 23:55

It appears the problem was my original url. I didn't notice but the url i was using had backslashes instead of forward slashes.

Using a replace to replace the backslashes with forward slashes has fixed it.

Moral of the story: If you urls look crazy check your slashes.

1 Answers1