ElectronでローカルPC内の画像ファイルをimgタグのsrcにローカルファイルパス設定して表示する
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
Author And Source
この問題について(ElectronでローカルPC内の画像ファイルをimgタグのsrcにローカルファイルパス設定して表示する), 我々は、より多くの情報をここで見つけました https://qiita.com/hideito2000/items/af833fe5181ec4b9bd22著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .