3

Electron に一貫して画像をロードするのに問題があります。Webpack テンプレートで 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

これを解決するには、いくつかの方法を考えることができます。

  1. webpack 構成は、開発または運用で実行されているかどうかを何らかの環境変数またはフラグを介して認識し、copy-webpack-plugin の「to」パスを変更する必要があります。
  2. 開発サーバーを実行するように変更して、そのルートが.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 ファイルにインポートして、webpack ローダーで実行することは避けたいと思っています。開発と運用の両方で機能する方法で、HTML コードから静的ファイルを参照したいだけです。

を使用してアクセスする必要がある 5MB の JSON ファイルもありますfetch()。ローダーを介してこれをインポートしようとしましたが、ビルド プロセスに 5 分以上かかり、強制終了しました。

静的ファイルのロードは、Web ページ作成の基本的な部分であり、非常に明白なものが欠けていない限り、プロジェクト テンプレートの一部にする必要があります。

4

3 に答える 3