Electron-forge: Images Paths Not Working in Packaged App

[stevechap416]

• [x ] I have read the contribution documentation for this project.
• [x ] I agree to follow the code of conduct that this project follows, as appropriate.
• [x ] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Please describe your issue:

My application serves as a library for some assets we have hosted on our internal server:

When testing img tags resolve to the correct location, however when the app is packaged the src has 'File:///..." inserted in front of the correct path and these image assets do not load. Is there a flag or setting somewhere to point these images to the correct location and or remove File:/// for those assets?

[malept]

I wonder if this is related to #153.

[edsadr]

I would suggest you to create a custom protocol to intercept those calls, https://electron.atom.io/docs/api/protocol/ this will solve your problem

[MarshallOfSound]

@stevechap416 Can you provide a sample that repros this?

[MarshallOfSound]

As the reporter has not responded to the request for additional information this issue will be closed. If further information can be provided at some point in the future, comment on this issue with the requested information and if appropriate the issue will be reopened.

[bumTomica]

@MarshallOfSound Same problem here. For example this works on start, but not on make. I have inspected the problem in dev tools, network tab shows that it has 200 on images in both cases, but on make the response type is plain/text and not image as in start. Tried all the combinations with file://, "", '', img tags and so on, all the same on make. Hope it helps.

document.getElementById('background').style.backgroundImage = "url(file:///Users/bumtomica/.../image.jpg)"

Online images work as aspected.

[stevechap416]

Sorry for the very late response, but I followed the rabbit-hole of topics @malept mentioned.

This came from another poster but it essentially solved my issue when I added it to the top of my index.js. (My app calls for both png and jpeg as well as ms maxscript files):

addBypassChecker((filePath) => { return filePath.indexOf(app.getAppPath()) === -1 && (/.jpg/.test(filePath) || /.ms/.test(filePath) || /.png/.test(filePath)); });

[onassar]

@stevechap416 can this be added anywhere? I'm working on a helper class that allows me to request remote modules (from a domain I control), but my calls to require('electron-compile').addBypassChecker don't seem to be doing much :(

[RebelSyntax]

How can I load files outside of app.asar? I've used asar.unpackDir but I cannot get an image file in the resource/app.asar.unpacked directory to load from any type of reference, relative or not. getting the browser message that I cannot load local resources. ok, the entire app is a local resource.

How can I tell electron that everything will be ok if it goes ahead and include resource from whatever local path I tell it to?

I guess bumping a closed topic is not helpful, but neither is the OP coming back to say he copied pasted some other ticket to solve this :( That copy paste function doesn't make sense because where does the filePath argument come from? What calls this function?

[stevechap416]

@onassar I included an import:

import { addBypassChecker } from 'electron-compile';

and then the addBypassCheck function I mentioned:

addBypassChecker((filePath) => { return filePath.indexOf(app.getAppPath()) === -1 && (/.jpg/.test(filePath) || /.ms/.test(filePath) || /.png/.test(filePath)); });

This was done at the top of my app's index.js. This solved my app's issues with being able to access local resources with the file types included in the fuction.

@RebelSyntax I apologize for not being more helpful but maybe someone that is more knowledgeable can step in? I'm really more of tinkerer and I won't pretend I know exactly is going on here. I never coded a call to this function but it resolved my issue, there is maybe something going on behind the scenes? Clearly this is an issue that multiple people have run into over a long period of time and there should be some clearer documentation on pulling local resources into apps.

[onassar]

@stevechap416 thanks for the follow up. It was holding me back so I changed the way things work. If/when I'm in the position again, I'll try your approach.

[MarshallOfSound]

This won't be an issue with forge v6

You can check out the preliminary docs here: https://v6.electronforge.io

[onassar]

Thanks for jumping in @MarshallOfSound
I was wondering yday: when will forge start using Electron 2.0? Will I need to do anything other than just update my local brew?

[MarshallOfSound]

You can already use electron 2.0 with forge, just update your "electron-prebuilt-compile" dependency

[onassar]

Tip on how to do so? Just change the value in package.json and run npm start again?

[malept]

Change the value in package.json and run npm install (or npm update depending on if you want to update everything else too within the confines of your semver ranges), then run npm start.

[RebelSyntax]

@stevechap416 Thanks for responding back, I didn't understand how that was a closed issue that is all. I tried what you tried and that didn't work.

What I ended up doing was registering a protocol which works perfectly in my situation. Linux only for this app so no worries about windows file handler.

I added this inside of app.on('ready', ()=>{
})

protocol.registerFileProtocol('local', (request,callback) =>{ const url = request.url.substr(8); callback({path: path.normalize(${url})}); }, (error) => { if (error){ console.log('failed to register protocol'); } });
the to use it it goes like this for eg.. inside the index.html that the app loads
let cssLink = document.createElement('link'); cssLink.setAttribute('rel', 'stylesheet'); cssLink.setAttribute('href',local://${ui['styles.style.css']}); document.head.appendChild(cssLink);
the ui['styles.style.css'] is just my way of checking folder locations for files that I want to be able to use in my template.

[onassar]

@malept Which property should I change, and to which value?
I'm assuming electron-prebuilt-compile to 2.0.0 but want to confirm first 🤓

[malept]

Yes, that.

[onassar]

Looks good; I got the alert Update available 5.6.0 → 6.0.0
How safe is it? I see that there's no 6.0.0 in the releases area yet, so I've been reluctant to upgrade.

[malept]

Uhhh, that's NPM's version.

[onassar]

Oh hilarious; I assumed it was for electron-forge since I saw this earlier:

The master branch is a rewrite of Electron Forge that will eventually be the 6.x series. If you are looking for the 5.x series (the version currently published to NPM), please view the 5.x branch.

Thanks!

[Aditya0149]

@stevechap416 thank you so much! The fix is worked for me.

[felipebutcher]

@onassar I included an import:

import { addBypassChecker } from 'electron-compile';

and then the addBypassCheck function I mentioned:

addBypassChecker((filePath) => { return filePath.indexOf(app.getAppPath()) === -1 && (/.jpg/.test(filePath) || /.ms/.test(filePath) || /.png/.test(filePath)); });

This was done at the top of my app's index.js. This solved my app's issues with being able to access local resources with the file types included in the fuction.

@RebelSyntax I apologize for not being more helpful but maybe someone that is more knowledgeable can step in? I'm really more of tinkerer and I won't pretend I know exactly is going on here. I never coded a call to this function but it resolved my issue, there is maybe something going on behind the scenes? Clearly this is an issue that multiple people have run into over a long period of time and there should be some clearer documentation on pulling local resources into apps.

this worked for me after days of bloody battle. thank you!

[hpbots]

I got the same issue and tried adding in the code above and got this error

import { addBypassChecker } from 'electron-compile';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:815:22)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)
at Module.load (internal/modules/cjs/loader.js:735:32)
at Module._load (internal/modules/cjs/loader.js:648:12)
at Module._load (electron/js2c/asar.js:715:26)
at Function.Module._load (electron/js2c/asar.js:715:26)
at loadApplicationPackage (/Users/xxx/Desktop/appName/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:109:16)
at Object. (/Users/xxx/Desktop/appName/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:880:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:892:10)