У меня проблемы с постоянной загрузкой изображений в Electron. Я использую Electron Forge с шаблоном веб-пакета https://www.electronforge.io/templates/webpack-template
Мой каталог src выглядит так:
├── images
│ └── black.png
├── index.css
├── index.html
├── index.js
├── main.js
└── renderer.js
Мой HTML-код выглядит так:
<img src="images/black.png">
Я использую copy-webpack-plugin
для копирования каталога images
.
При запуске в стадии разработки (npm run start
) корнем сервера разработки является .webpack/renderer
, поэтому изображение загружается. При запуске в производственной среде (npm run package
) файл HTML открывается из файловой системы, поэтому тег изображения пытается получить доступ к .webpack/renderer/main_window/images
, который находится в неправильном месте, и не загружается.
Я заставил его работать как в разработке, так и в производстве, выполнив:
<img src="../images/black.png">
Это хакерский способ, который не соответствует способу хранения файлов в каталоге src. Это должно быть просто, но я потратил часы, пытаясь понять это, и пока у меня нет реального решения.
Я видел решение, выраженное в этих ссылках, но я не мог заставить его работать как в разработке, так и в производстве, не поставив "../" перед путем.
https://github.com/electron-userland/electron-forge/issues/1196
https://github.com/electron-userland/electron-forge/issues/941
Я могу придумать несколько способов решить эту проблему:
- Конфигурация веб-пакета должна знать через какую-то переменную среды или флаг, работает ли он в разработке или производстве, и изменить путь copy-webpack-plugin «к».
- Измените сервер разработки для запуска, чтобы его корень был
.webpack/renderer/main_window
Я видел рекомендацию импортировать изображение в renderer.js
, но у меня есть несколько тысяч изображений. Должен ли я сделать это так?
import './images/1.png';
import './images/2.png';
import './images/3.png';
// ...
import './images/1000.png';
Есть ли способ программно импортировать? Что-то вроде:
let imageMap = {};
for (let i of Iter.range(1, 1001)) {
let image = import(`./images/${i}.png`);
imageMap[i] = image;
}
Тогда как бы я мог сослаться на это в HTML? Можно ли это сделать без кода редактирования DOM?
Я предпочитаю не импортировать свои изображения в файл JavaScript и не запускать их через загрузчики веб-пакетов. Я просто хочу ссылаться на статические файлы из моего HTML-кода таким образом, чтобы это работало как при разработке, так и при производстве.
У меня также есть файл JSON размером 5 МБ, к которому мне нужно получить доступ с помощью fetch()
. Я пытался импортировать это через загрузчик, но процесс сборки занял больше 5 минут, и я его убил.
Загрузка статических файлов - это основная часть создания веб-страниц, и она должна быть частью шаблона проекта, если я не упускаю что-то очень очевидное.