ローカルのファイルをHTML上で表示させたい

Question

ローカルに保存した画像ファイルをHTMLで出す、といった処理を実施したいです。

<img src="file:///C:/tmp/WFvbFvqjuE.jpg">

コンソールで以下が出力されていました。

Not allowed to load local resource: file:///C:/tmp/puTpkXdkQH.jpg
XMLHttpRequest cannot load file:///C:/tmp/[e-mail]. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

上記のように記述したのですが、画面に表示されません。
srcの内容をコピペすれば画像が見れるので指定ミスではないのですが…。

お手数ですが、よろしくお願いします。

Comments

[t_obara]

ブラウザの開発ツールをご覧いただき、コンソールにエラーなどが出ていないことは確認済みでしょうか？

[romimi]

ありがとうございます、エラーが発生していたため、記載いたします。

Answer 1

ただimgタグにそのパスを書くのでしたら、それで上手く行くはずです。

もしかしたら、Ajaxか何かでファイルを取得しようとしているのでしょうか？
だとしたら、エラーメッセージに書いてあるとおりで、
Not allowed to load local resourceつまり「ローカルリソースのロードは許可されていない」です。

Answer 2

sample
 ┣ image/
 ┃  ┗ img1.png
 ┗ index.html

まず、フォルダをこのような構成にします。
sampleというフォルダの中にimageというフォルダとindex.htmlがあり、
imageフォルダの中にはpng画像が入っています。

その上で、index.htmlに下記のように書くと表示されるはずです。

<img src="./image/img1.png">

Answer 3

参考情報

• 画像ファイルを読み込む－JavaScript入門（HTML5編） http://www.pori2.net/html5/File/040.html

...
ファイル選択ダイアログで指定した画像ファイルを、divタグ内に書き出します。
ご自身のPCにある画像ファイルを指定してみて下さい。
...

• HTML5のFile APIでローカルファイル情報取得してやんよ!!!

...
File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。

このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。
File APIにはローカルファイルの読み取りだけでなく、書き込みやファイルを操作するAPIも用意されています。
...

Answer 4

Windowsと思われるのでWebサーバはIISでしょうか？

C:/tmp/WFvbFvqjuE.jpgがDocumentRoot配下にないのではないでしょうか？
あとimg srcは通常は絶対パスではなく相対パスで書くのがベターかと。

Answer 5

以下でどうですか？

<img src="C:/tmp/WFvbFvqjuE.jpg">

Comments

[romimi]

回答ありがとうございます。
ですが"file:///"を除外したソースは一度書いたのですが実現しませんでした。

[root_jp]

Ajaxなんですね。
ローカルのファイルにはセキュリティ上アクセスできません。
そんなことできたら、他人のPC壊せますので。
できるのは、input type="file" で選ばした時だけです。
どうしてもアクセスしたければ、Node.js を使う必要があります。