ElectonJs base64 图像 src - 无法加载资源答案

【问题标题】：ElectonJs base64 image src - Failed to load resourceElectonJs base64 图像 src - 无法加载资源
【发布时间】：2023-03-23 21:40:01
【问题描述】：

在 electronJs 应用程序中，我尝试使用动态创建的图像标签加载 base64 图像。使用方法 insertAdjacentElement() 将 base64 字符串附加到图像标记并附加到容器中。我尝试使用模板字符串方法设置源，但没有成功。

当我运行应用程序并执行附加图像的操作时。在控制台中，我收到错误： 加载资源失败：net::ERR_FILE_NOT_FOUND 我已经尝试了许多 base64 字符串，但结果总是这样。

const imgTemplate: HTMLImageElement = document.createElement('img') as HTMLImageElement;
                    imgTemplate.src = base64; // declared variable container base64 string

                    if(this._appThumbnailContainer) {
                        this._appThumbnailContainer.insertAdjacentElement('beforeend', imgTemplate)
                    }

下面是 DOM 中的 html 屏幕。

在开发者工具的网络选项卡中，它似乎正在做一个提取：

【问题讨论】：

这个问题更多地与 Angular/Vanilla JavaScript 相关，而不是 Electron。格式不应该是，imgTemplate.src = "data:image/jpeg;base64,"+base64;
你怎么知道它是有角度的？如果你说香草我可以同意。我已经引导应用程序使用电子。我正在使用电子 API 和节点 API 来访问文件系统和生成 base64 的模块。没有使用框架，我只是在 webpack 的帮助下有一个文件 app.ts 来生成 app.js.... 一旦 base64 字符串返回 onSuccess，我将其传递给新创建的标记 src。使用 base64 作为 src 值，电子似乎将此作为请求获取，导致“无法加载响应数据”@TomShaw 将尝试您的建议

标签： html node.js electron

【解决方案1】：

您的 src 字符串中似乎有一个额外的引号 (src="')，请重新检查您的 base64 变量包含的内容。

【讨论】：

单引号是否存在没有区别。在将 base64 传递给 src 之前，我将 base64 用单引号括起来，看看它是否会有所作为。

【解决方案2】：

发现该问题与我在 index.html 的 head 标记中添加的内容安全策略元标记有关。添加此功能是为了解决与特定问题相关的问题，但在不再需要元数据的情况下找到了解决方法。

我评论了它，看看它是否会有所作为，是的。

下面是元标记：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; connect-src *">

【讨论】：