Я просто потратил несколько часов, разбираясь с этим. Судя по некоторым темам, которые я видел на Stack Overflow, я не единственный, у кого есть эта проблема. Некоторые из ответов привели меня в нужное место, чтобы решить эту проблему, но ни один из ответов не был полным — по крайней мере, в версии 22 Электрона.
В нескольких решениях упоминался протокол, но ни одно из них не сработало для меня в том виде, в каком они были представлены.
Оказывается, решением является этопротокол, а не просто одна функция протокола. Он включает в себя protocol.registerSchemesAsPrivilegedиprotocol.registerFileProtocol.
registerSchemesAsPrivileged должен предшествовать событию ready для приложения, а registerFileProtocol должен вызываться после срабатывания события ready.
Итак, без лишних слов, вот мой функциональный код. Он находится в файле main.js (или его эквиваленте), который вызывается из свойства main в вашем файле package.js.
const protocolName = "my-scheme-name";
protocol.registerSchemesAsPrivileged([
{ scheme: protocolName, privileges: { bypassCSP: true } },
]);
app.whenReady().then(() => {
protocol.registerFileProtocol(protocolName, (request, callback) => {
const url = request.url.replace(`${protocolName}://`, "");
try {
return callback(decodeURIComponent(url));
} catch (error) {
// Handle the error as needed
console.error(error);
}
});
...
});
my-scheme-name может быть любым.
Теперь вы можете использовать эту привилегированную схему в процессе визуализации следующим образом:
<img src="my-scheme-name:///user/name/desktop/image-file.jpeg" />
Он должен отобразить ваш локальный файл ресурсов, как и ожидалось, потому что my-scheme-name теперь является привилегированным и обходит политику безопасности контента.
