为什么我的 CSS 背景图像没有加载到电子中？

Question

I'm developing a react app packaged in electron that has to download it's content from the internet. That content then gets stored in the data folder. Most of the time this works just fine. I have to pay attention to set my URLs properly, or it breaks when I move between Windows and Mac, but with a little time and attention I can make it work on both.

All that came to a crashing halt just now, because I need to use an image as a background. My code works 100% fine on Mac, breaks on windows. I've validated the output of my code, it's producing a valid path to the relevant file. I can even copy & paste that into the browser and the background image loads just fine. For some reason, the css code is mangling the results -- and I really do mean 'mangling', stripping slashes, creating weird escapes, inserting garbage characters in strange places. When I use the debugger I can see both my console.log() outputs with a valid url, and a 404 error when the browser tries to get another url entirely. You can see that it started out as the target URL, but it's been transformed in ways I don't understand.

The following code is vastly simplified -- it doesn't include, for example, the actually directory structure of my app in the path.join() call.

var fullPath = path.join(AppDataFolder, 'stuff', filename)
var url = url.format({ pathname: fullPath, protocol: 'file', slashes: true })
//Url, if printed, is file:///c:\app\data\dir\rental\file.suffix -- the right output
<div style={{ backgroundImage: `url(${url})` }}>
</div>
//Use the debugger on the result above, and you get an error 404ing on:
//file:///C:/appdatadir%E3%89%83%0garbagefilesuffix

If I instead put the target into an image tag, <img src={target} /> , it works fine, both Windows & Mac.

What am I doing wrong? How do I fix this?

Answer 1

In reactjs we have supposed to be use CSS properties in Camel case.

<div style={{ backgroundImage: `url(${url})` }}>

Reference: https://reactjs.org/docs/dom-elements.html#style

Answer 2

We need more information to see if the url encode-ish issue really the problem you have. Would you try to put a double quote like

<div style={{ backgroundImage: `url("${url}")` }}>

to see if that solve your problem?

and for not working is the image not show up for you or the network tab of the browser really show it ping that odd URL and return a 404? as you may simply CSS issue like width and height needed.

<div style={{ backgroundImage: `url("${url}")`, width: 40, height:40 }}>

I think you mentioned you simplified your code so it may not be the issue but just checking... I have a mac here so referring image to the file system is different than in PC so won't be able to reproduce that same issue. But the one more thing you may want to check is the permission issue as not sure what hosting your react app (node?) that may have issue to talk to local file.