在 Angular 11 中提供外部资源

【问题标题】：Serving external resources in Angular 11在 Angular 11 中提供外部资源
【发布时间】：2021-07-18 23:13:36
【问题描述】：

我目前正在使用 Angular 11 + Electron + Java 构建一个画廊应用程序，但我遇到了这个我无法解决的问题。使用后端，我获得了用户选择的文件夹中的所有文件，但是，当我使用路径作为 src 时，Angular 在路径前添加了http://localhost:4200。

我无法使用资产文件夹，因为包含图像的文件夹的源路径是由用户选择的，并且可能因不同的 PC 而异。

处理这个问题的正确方法是什么？

【问题讨论】：

标签： javascript angular electron

【解决方案1】：

我找到了解决办法。首先是设置

webSecurity: false

在电子的 main.ts 文件中。然后，在同一个文件中，注册以下协议：

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

最后，使用图片路径时，在图片的绝对路径前加上file://。

这会带来潜在的安全问题，因此请仔细评估您的应用的使用方式！

【讨论】：