web-dev-qa-db-ja.com

<img src = "C：/localfile.jpg">ができないのはなぜですか？

Htmlファイルがローカル（Cドライブ上）にある場合は機能しますが、htmlファイルがサーバー上にあり、イメージファイルがローカルにある場合は機能しません。何故ですか？

可能な回避策はありますか？

javascripthtmlfilesystemssrc
82
PeterV

クライアントがローカルファイルシステムファイルを要求し、JavaScriptを使用してファイルの内容を把握できる場合、セキュリティ上の脆弱性が発生します。

これを回避する唯一の方法は、ブラウザで拡張機能を構築することです。 Firefox拡張機能とIE拡張機能はローカルリソースにアクセスできます。 Chromeはより制限的です。

53
Bjorn Tipling

「C：/localfile.jpg」の代わりに「file：// C：/localfile.jpg」を使用してはいけませんか？

28
AndreDurao

ローカルhtmlページにアクセスしない限り、ブラウザーはローカルファイルシステムにアクセスできません。どこかに画像をアップロードする必要があります。 htmlファイルと同じディレクトリにある場合は、<img src="localfile.jpg"/>を使用できます

25
Newtang

C:は、認識されているURIスキームではありません。代わりにfile://c|/...を試してください。

15
Ignacio Vazquez-Abrams

正直なところ、最も簡単な方法は、ファイルホスティングをサーバーに追加することでした。

  • IISを開く

  • デフォルトWebサイトの下に仮想ディレクトリを追加する

    • 仮想パスは、ブラウザで参照するものになります。そのため、「serverName/images」を選択すると、 http：// serverName/images にアクセスして参照できます。 =
    • 次に、C：ドライブに物理パスを追加します

  • 「ネットワークサービス」および「IIS AppPool\DefaultAppPool」のC：ドライブのフォルダーに適切なアクセス許可を追加します。

  • デフォルトのWebサイトを更新

  • これで完了です。 http：//yourServerName/whateverYourFolderNameIs/yourImage.jpg に移動して、そのフォルダー内の任意の画像を参照し、img srcでそのURLを使用できます。

これが誰かを助けることを願って

4
foremaro

IE 9：ユーザーがサーバーに画像を投稿する前に画像を確認したい場合：ユーザーは、ウェブサイトを「信頼済みウェブサイトリスト」に追加する必要があります。

3
United4Peace

セキュリティ規則に関するNewtangの見解はさておき、あなたのページを見た人がc:\localfile.jpgで正しい画像を持っていることをどのようにして知るのでしょうか？できません。できると思っても、できません。一つには、Windows環境を前提としています。

2
Jack Kelly

あなたがやろうとしていることには2つの可能性があります：

  1. サーバー上で実行されているWebページで、最初に設計したコンピューター上のファイルを見つけたいですか？

  2. あなたはそれがページで見ているPCからそれを取得したいですか？

オプション1は意味がありません:)

オプション2はセキュリティホールになります。ブラウザは、Webページ（Webから提供される）が視聴者のマシンにコンテンツをロードすることを禁止します。

カイル・ハドソンはあなたがする必要があることをあなたに話しました、しかしそれはあなたがしたいことすべてであると信じるのが難しいと思うほど基本的です。

1
Juan Mendes

google chromeブラウザを使用している場合、次のように使用できます

<img src="E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

ただし、Mozila Firefoxを使用する場合は、「ファイル」を追加する必要があります。

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
1
Sachindra N. Pandey

画像をユーザーが選択したものにするのはどうですか？ input：fileタグを使用し、画像を選択した後、クライアントサイドWebページに表示しますか？これはほとんどの場合に実行可能です。現在、IEで動作するようにしていますが、すべてのMicrosoft製品と同様に、それはクラスターfork（）です。

0
Fallenreaper

自分自身または特定のクライアント専用にローカルWebサイトを展開している場合、cmdでadminとしてWebサイトのルートディレクトリでmklink /D MyImages "C:/MyImages"を実行することでこれを回避できます。次に、htmlで<img src="MyImages/whatever.jpg">を実行します。mklinkによって確立されたシンボリックリンクは、相対srcリンクをCドライブ上のリンクに接続します。私にとってこの問題は解決したので、この質問に答える他の人の助けになるかもしれません。

（明らかに、人々のコンピューターでcmdコマンドを簡単に実行できないため、これは公開Webサイトでは機能しません）

0
takanuva15

javascriptのFileReader（）を使用して、readAsDataURL（fileContent ）ローカルドライブ/フォルダファイルを表示する機能。変更イベントをイメージにバインドしてから、javascriptのshowpreview関数を呼び出します。これを試して -

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
    <title></title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript">
    function showpreview(e) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#previewImage").attr("src", e.target.result);
        }
        //Imagepath.files[0] is blob type
        reader.readAsDataURL(e.files[0]);
    }
    </script>
</head>
<body >
    <div>
    <input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
    </div>
    <div>
        &nbsp;
    </div>
    <div>
    <img width="50%" id="previewImage">
    </div>
</body>
</html>
0
Ravindra Vairagi

画像もアップロードしてから、サーバー上の画像にリンクする必要があります。

0
Kyle Hudson