CSS loading image with url() on windows gets path messed up - css

Question

So i have this mountains.jpg which is in the root folder of the project that i want to load in the background.
My container has style={{ backgroundImage: `url(${path.resolve("mountains.jpg")})` }}
I have also a console.log(path.resolve("mountains.jpg")) which prints this on Linux:
/home/user/Documents/App/dist/linux-unpacked/mountain.jpg
and the image loads fine!
But then i install it on Windows and run the app.
The path printed is C:\Users\user\AppData\Local\Programs\app\mountains.jpg which i checked and the image was in the right place.
But then i get this error:
Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///C:/UsersuserppDataLocalProgramsppmountains.jpg
which is very odd. The path seems all messed up when it is parsed by url(path)
If anyone knows a fix for this, i would be thankful to know.

Answer 1

My image is in the project root folder and my component in src/Component.js. I used a relative path from my component to the image, and the image could load fine.
So the problem was that after i used electron-builder, and ran the app in dist folder, the relative path was no longer valid, because the component now supposedly was one level deeper, as the console.log(path) showed me.
package.json build
"build": {
"appId": "com.app",
"files": [
"build/**/**/*",
"node_modules/**/*",
"./main.js"
],
"extraFiles": [
{
"from": ".",
"to": ".",
"filter": [
"*.jpg",
"*.png"
]
}
],
So i was telling electron-builder to target the image files in root and copy them over to the dist folder, but the relative path to the image changes. So i used full path using process.cwd() so in both cases it starts in root project folder then points to image from there.
But as the windows path gets bugged, i tried a different approach, which was removing the "extraFiles:" part from package.json, and then adding a file-loader module to Webpack.
Then, as suggested by other people, i added import image from '../mountains.jpg'
and then
<Component style={{ backgroundImage: `url(${image})` }}></Component>
And now it works on Windows too :)
The image won't be in the root folder tho, so to have the image shipped with the app and be available on the root folder, the extraFiles can still be used so the image gets copied over.