LoginSignup
6
7

More than 5 years have passed since last update.

ElectronでローカルPC内の画像ファイルをimgタグのsrcにローカルファイルパス設定して表示する

Last updated at Posted at 2019-01-19

ElectronでローカルPC内のアプリケーション配下ではない別のフォルダにある画像を画面表示したくて、以下のような感じでimgタグのsrcにローカルファイルパスを設定したところエラーになり表示されませんでした。

<img src="C:\sample\image.jpg">
Not allowed to load local resource: file:///C:/sample/image.jpg

どうやら、開発用の「npm run dev」で起動するとWebサイトとして実行(index.htmlをhttpでロード)しているため、Webセキュリティの機能でエラーになるそうです。Electronアプリとしてビルドしたものであればエラー発生しないらしい。
指定したフォルダ配下の画像ファイルを表示するときに注意すること

とはいえ、開発中の「npm run dev」での起動状態でもローカル画像ファイルを表示したい。

試しに、以下のようにindex.jsあたりでBrowserWindowをnewしているところでwebSecurityのパラメータをfalseにしてみたとろ、エラーが表示されずにローカル画像ファイルが表示されるようになりました。(この設定に変更して「npm run dev」しなおした初回はなぜかうまくいかなかったのに、何度かやり直しているうちに正常に動作するようになりました。。。なぜ??)

  mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity: false
    }
  })

webSecuriy設定をOFFにすると動作するようになるということなんですが、開発中の「npm run dev」での起動状態のときだけOFFにしたいので以下のような設定にしました。

  mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity: process.env.NODE_ENV !== 'development'
    }
  })

参考
https://github.com/SimulatedGREG/electron-vue/issues/539
https://electronjs.org/docs/api/browser-window

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7