file：//プロトコルを使用してChromeでローカル画像を表示する方法は？

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

私はIEを使用してこれを行ったことを覚えていますが、どのように覚えていません！私が思ういくつかの信頼できる設定...

たとえば、「http://duri.me/」を使用して、イメージをbase-64コードに変換し、結果をブラウザーにコピーできます。のような：

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

「Chrome」と述べたので、Chrome拡張機能を使用してこれを行い、ファイルへのローカルアクセスを有効にすることができます。

次の手順を実行します：

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

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

2）これはあなたのクロムアドレスバーです：chrome：// extensions /

3）[開発者モード]がオンになっていることを確認します（ページの右上）

4）[Unpacked Extensionの読み込み]ボタンをクリックします

5）イメージとmanifest.jsonファイルがあるローカルフォルダーに移動し、[OK]をクリックします

6）拡張子「File Exposer」がリストに表示され、「有効」にチェックマークが付いているはずです。フォルダーがネットワークドライブまたは他の低速ドライブ上にあるか、ファイルが大量にある場合、リストに表示されるまでに10〜20秒以上かかることがあります。

7）拡張機能に関連付けられている「ID」文字列に注意してください。これはEXTENSION_IDです

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

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

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

「img」タグでは、元のフォルダーとそのフォルダーからの相対フォルダーを指定しないでください。したがって、サブフォルダーのみを指定する必要があります。

manifest.jsonファイルを変更する場合は、拡張機能の横にある[リロード（Ctrl + R）]リンクをクリックする必要があります。

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

LocalLinks（Firefoxの場合）を使用してこれをオーバーライドできますが、ご使用のマシンでのみ機能します。

Chromeではこれはこんな感じ

file:///C:/sample.txt

ライブサイトでローカルイメージをテストする場合は、ローカルWebサーバーを実行し、DevToolsを使用してページにhttp://127.0.0.1:8123/img.jpgのようなURLを設定できます

Webサーバーを実行するにはさまざまな方法があります。1.定義済みのフォルダーhttps://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigbを使用するブラウザー「Chrome用Webサーバー」の拡張機能

2. Pythonがある場合は、選択したフォルダーで埋め込みHTTPサーバーを実行します

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

3. nginx、apacheのような本番対応サーバーを使用する

私の場合、異なるレスポンシブサイズで1つの小さな画像の変更がどのようになるかを確認するだけでした。「名前を付けて保存...」をデスクトップに完全なWebページとして保存し、代わりに開くのが最も簡単でした。画像srcを調べて編集します。

さて、あなたはあなたのローカルファイルシステムを他の誰かにアクセスさせるだけではいけません！Apacheのようなサーバーサービスが必要で、コンピューターを1日24時間実行し、過熱しないようにし、優れたセキュリティに注意を払い、それを可能にします。また、サーバー管理は高価で時間がかかるため、ほとんどの人はプロが私たちのために私たちのものをホストするようにしています（ウェブホスティング）。

結論として、独自のサーバーを実行したくない場合は、選択したWebホスティング業者にサーバーをアップロードする方がはるかに簡単です。