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


23

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

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

回答:


14

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

7
この情報は誰かにとっては役に立つかもしれませんが、実際にはこの質問に答えるものではないと思います。
G-Manが「Reinstate Monica」と言う14

12

「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)]リンクをクリックする必要があります。


8

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

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


2
画像では動作しません
ウィレム・ダヘレエル

クロームは馬鹿げていると思いabout:blankます。ページを試してみましたが、許可していませんでした。ローカルのHTMLファイルを開くのに疲れて、@ WillemD'Haeseleerが言った画像でも動作しました。:私のコードは、このだったdrawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";
Shayan

2

Chromeではこれはこんな感じ

file:///C:/sample.txt

私はこのようなことをした後、Web上でホストされていますが、ユーザーのローカルファイルを見ています.... <!DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" " w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns =" w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf -8 "/> <title>例</ title> </ head> <body> <img src =" file:/// c:/graphics/image.jpg "height =" 200px "width =" 200px "/ > <H1>ようこそ</ H1> <P>こんにちは</ P> </ body> </ html>この
JSH

1
file:///表記の.htmlファイルと.jpgファイルを試しましたが、どちらも正しくレンダリングされました。アドレスバーとコンテンツの一部を示すスクリーンショットを投稿してください。
KutscheraIT

試すjsh.learningict.netを -明らかにあなたが持っていない画像が、コードが示すあなた、私が後だかのアイデア
JSH

あなたがイメージタグを参照していると推測することができますが、srcを<img src = "file:/// c:\ test.jpg" height = "200px" width = "200px"に置き換えたときにもうまく機能します> c:\ test.jpgはそのパスで有効なjpgであり、正常に表示されます。
KutscheraIT

それはosxのものですか?SRC refはちょうどないHTMLコードで、Chromeのアドレスバーに罰金だけで動作します
JSH

2

ライブサイトでローカルイメージをテストする場合は、ローカル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サーバー」の拡張機能

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

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

  2. nginxapacheのような本番対応サーバーを使用する


0

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


それは、OPが求めていたものとはまったく関係がなく、まったく関係がないようです。質問を注意深く読んで、追加する関連情報がない限り、答えたりコメントしたりしないでください。
music2myear

1
しかし、それは私が探していたものです
サミュエルトンプソン

-1

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

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


2
問題は、ローカルシステム上の大規模なアクセスファイルでインターネットを許可することではありません。
キセノイド
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.