来自本地文件系统的 Electron JS 图像 [英] Electron JS Images from Local File System

问题描述

我是电子新手，并试图从本地文件系统加载图像以将其显示在屏幕上.因此，当我这样做时，来自远程 URL 的图像工作得很好

I am new to electron and trying to load images from the local file system to display it on screen. So for images from the remote URLs are working just fine when I do

<img src='https://example.com/image.jpg' />

但是当我尝试在渲染过程中从本地文件系统加载相同的图像时，它不起作用

But when I try to load the same image from the local file system in my render process it does not work

<img src='file:///C:/tmp/image.jpg' />

未呈现.

这是我得到的错误:

> Not allowed to load local resource:
> file:///C:/tmp/nW4jY0CHsepy08J9CkF1u3CJVfi4Yvzl_screenshot.png
> dashboard:1 Not allowed to load local resource:
> file:///C:/tmp/TOyUYWnJK7VS9wWeyABhdgCNmp38FyHt_screenshot.png

是否需要进行任何配置以允许电子从本地文件系统渲染图像或者我做错了?

Is there any configuration that needs to be made to allow the electron to render images from the local file system Or I am doing it entirely wrong?

推荐答案

默认情况下，只有在使用 file:// 出于安全原因的协议.

Electron by default allows local resources to be accessed by render processes only when their html files are loaded from local sources with the file:// protocol for security reasons.

如果您从任何 http:// 或 https:// 协议甚至从 webpack-dev-server 等本地服务器加载 html，请访问本地资源被禁用.

If you are loading the html from any http:// or https:// protocol even from a local server like webpack-dev-server, access to local resources is disabled.

如果您仅在开发期间从本地服务器加载 html 页面并在生产中切换到本地 html 文件，您可以在开发期间禁用网络安全，注意在生产中启用它.

If you loading html pages from a local server only during development and switching to local html files in production, you can disable websecurity during development, taking care to enable it in production.

如果您甚至在生产环境中也从远程源加载 html，最好且安全的方法是将其上传到服务器上的某个位置并加载.

If you are loading html from remote sources even in production, the best and secure way is to upload it somewhere on your server and load it.

这篇关于来自本地文件系统的 Electron JS 图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！