Изображения Electron JS из локальной файловой системы

Question

Я новичок в электронике и пытаюсь загрузить изображения из локальной файловой системы, чтобы отобразить их на экране. Так что для изображений с удаленных URL-адресов работают нормально, когда я

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

Но когда я пытаюсь загрузить то же изображение из локальной файловой системы в процессе рендеринга, оно не работает

<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

Есть ли какая-либо конфигурация, которая должна быть сделана, чтобы электрон мог визуализировать изображения из локальной файловой системы? Или я делаю это совершенно неправильно?

Answer 1

Electron по умолчанию разрешает локальным ресурсам доступ к процессам рендеринга только в том случае, если их html-файлы загружаются из локальных источников по протоколу file:// по соображениям безопасности.

Если вы загружаете html из любого протокола http:// или https:// даже с локального сервера, такого как webpack-dev-server, доступ к локальным ресурсам отключается.

Если вы загружаете html-страницы с локального сервера только во время разработки и переключаетесь на локальные html-файлы в производственной среде, вы можете отключить веб-безопасность во время разработки, позаботившись о том, чтобы включить ее в производственной среде.

Если вы загружаете html из удаленных источников даже в производственном режиме, лучший и безопасный способ - загрузить его куда-нибудь на свой сервер и загрузить.