web-dev-qa-db-ja.com

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

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

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

google-chromeurlpictures
26
JSH

たとえば、「 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=='>
15
Diogo Cid

「Chrome」について言及したので、Chrome拡張機能を使用してファイルにローカルアクセスできるようにすることができます。

次の手順を実行します：

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

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

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

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

4）[Load Unpacked Extension]ボタンをクリックします

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

6）拡張機能「File Exposer」がリストに表示され、「Enabled」にチェックマークが付いているはずです。フォルダーがネットワークドライブまたはその他の低速ドライブ上にあるか、ファイルがたくさんある場合、リストに表示されるまでに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）]リンクをクリックする必要があります。

13
Rob Donovan

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

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

8
user1686

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

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

  1. pythonがある場合は、選択したフォルダで埋め込み http server を実行します

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

  2. nginx 、 Apache のような本番環境対応サーバーを使用します

3
koxt

Chromeこれは次のようになります

file:///C:/sample.txt
2
KutscheraIT

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

0
changokun