☰

file:// プロトコルを使用して Chrome でローカル画像を表示するにはどうすればよいですか?

tag-icon • tag-icon google-chrome url pictures
file:// プロトコルを使用して Chrome でローカル画像を表示するにはどうすればよいですか?

Chrome を使用して http 経由で配信される Web ページ上の画像のローカル ファイル パスを指定できるようにしたいのですが、これは可能ですか?

IE を使用してこれを実行したことを覚えていますが、その方法を思い出せません。信頼できる設定がいくつかあったと思います...

答え1

画像をbase-64コードに変換することができます。例えば、"https://www.base64-image.de/" と入力し、結果をブラウザにコピーします。次のようにします。

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

答え2

「Chrome」について言及されているので、Chrome 拡張機能を使用してこれを行うと、ファイルへのローカル アクセスが可能になります。

次の手順を実行します：

  1. 画像があるローカル フォルダーに、「manifest.json」というファイルを作成し、次のように入力します。

{"name": "File Exposer", "manifest_version": 2, "version": "1.0", "web_accessible_resources": ["*.jpg","*.JPG"]}

  1. Chromeのアドレスバーに以下を入力してください: chrome://extensions/

  2. 「開発者モード」がチェックされていることを確認してください（ページの右上）

  3. 「アンパックされた拡張機能を読み込む」ボタンをクリックします

  4. 画像とmanifest.jsonファイルがあるローカルフォルダに移動し、[OK]をクリックします。

  5. 拡張機能「File Exposer」がリストに表示され、「有効」にチェックマークが付きます。フォルダーがネットワーク ドライブまたはその他の低速ドライブ上にある場合、またはフォルダー内に多数のファイルがある場合は、リストに表示されるまでに 10 ～ 20 秒以上かかることがあります。

  6. 拡張機能に関連付けられている「ID」文字列をメモします。これはEXTENSION_IDです。

  7. これで、HTML で次のようにファイルにアクセスできるようになります。「EXTERNSION_ID」を拡張機能が生成した ID に変更します。

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

*.jpg は再帰的であり、指定されたフォルダーとすべてのサブフォルダー内のファイルと自動的に一致するため、サブフォルダーごとに指定する必要はありません。また、大文字と小文字が区別されることにも注意してください。

'img' タグでは元のフォルダーを指定しません。元のフォルダーはそのフォルダーからの相対フォルダーなので、サブフォルダーのみを指定する必要があります。

manifest.json ファイルを変更する場合は、拡張機能の横にある「再読み込み (Ctrl+R)」リンクをクリックする必要があります。

答え3

非ローカルウェブページローカルファイルにアクセスできませんChrome または最新の Web ブラウザで。

これを上書きするにはローカルリンク（Firefox用) ですが、自分のマシンでのみ動作します。

答え4

ライブサイトでローカル画像をテストしたい場合は、ローカルWebサーバーを実行してURLを次のように設定します。http://127.0.0.1:8123/img.jpgDevToolsを使用したページ

ウェブサーバーを実行するにはいくつかの方法があります: 1. 定義されたフォルダーを持つブラウザの拡張機能「Web Server for Chrome」 https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Pythonをお持ちの場合は埋め込みを実行しますhttp サーバー選択したフォルダ

    python3 -m http.server 8123 # python 3 バージョン
    python -m SimpleHTTPServer 8123 # python 2 バージョン

  2. 次のような本番環境対応サーバーを使用するnginx、アパッチ

関連情報