Serving external resources in Angular 11

Question

I am currently building a gallery app using Angular 11 + Electron + Java, but I came across this issue that I have not managed to solve. Using the backend, I get all the files within a folder the user chooses, but then, when i use the paths as src for, Angular adds http://localhost:4200 before the path.

I can't use the asset folder because the source path of the folder containing the images is chosen by the user and may vary across different PCs.

What is the proper way to deal with this?

Answer 1

I have found a solution. First thing is to set

webSecurity: false

in electron's main.ts file. Then, in the same file, register the following protocol:

app.on('ready', () => {
    setTimeout(createWindow, 400);
    protocol.registerFileProtocol('file', (request, callback) => {
        const pathname = decodeURIComponent(request.url.replace('file:///', ''));
        callback(pathname);
    });
});

Finally, when using the image path, add file:// before the absolute path of the image.

This carries potential security issues, so carefully evaluate how your app is going to be used!