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

96

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

考えられる回避策はありますか？

javascript  html  filesystems  src 
— PeterV
ソース
3
なぜそんなことをしたいのか聞いてもいいですか。
— Boris Callens 2010年
2
@BorisCallensたとえば、自分のマシンに新しいイメージがあり、ステージングにアップロードするプロセス全体を実行したくない場合に、ステージングWebサイトでイメージの変更をテストしたい場合があります。それを行う唯一の方法は、とにかくステージングするのではなく、開発環境でイメージを変更することだと思われます。
— xji 2015
また、技術的に能力の低い知人に冗談を言って、Webサイトにハッキングしたと思わせるのにも最適な方法です。
— 0112
これをすばやく行う別の方法は、たとえばGoogleドライブなどのファイルをアップロードしてから、画像のURLをコピーして、その中に貼り付けることですsrc=""
— 0112
マシンで開発用Webサーバーを使用するだけです。でもPHPが組み込ま1が付属していますので、それは今日で簡単です。
— MauganRa

回答:

64

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

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

— ビョルン
ソース
1
それでも、フラッシュはChromeでも、ユーザーが選択したものすべてにアクセスできます
— Javier
1
それが理由に答えて、それを回避するいくつかの方法を与えたので、これを支持しました。私がおそらく行うこと（そして私があまり背景を提供しなかったことを知っている）は、ローカル画像を提供するためのローカルWebサーバーを作成することです。そうすれば、ブラウザはそれらを表示できます。
— PeterV 2010年
1
Flashは、ポリシーファイルが設定されている場合にのみローカルリソースにアクセスできます。そうでない場合は、ローカルモードになり、他の方法で制限されます。
— ビョルン2010年
2
この妄想的なセキュリティは単なる混乱です。<input type = file>フィールドのフォームからAJAXを使用してユーザーファイルをサーバーにアップロードできますが、ユーザーに親切にしてプレビューを表示したい場合は、ラウンドトリップを実行してファイルをにアップロードする必要があります。最初にサーバー。プレビュー画像をローカルで生成するよりも安全ですか？
— MKaama 2016
2
ユーザーに素敵なプレビューを表示するには、最初にサーバーへのラウンドトリップを実行する必要があります。AJAXで可能です。プレビュー画像をローカルで生成するよりも、最初にファイルをサーバーにアップロードする方が安全ですか？妄想的なセキュリティは妨害を生み出すだけで、問題を解決することはありません。
— MKaama 2016
31

「C：/localfile.jpg」の代わりに「file：// C：/localfile.jpg」を使用するべきではありませんか？

— AndreDurao
ソース
27

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

— ニュータン
ソース
絶対パス「/localfile.jpg」を使用して同じことを達成しようとしましたが、ブラウザが「Webイメージ」のように認識し、検出されないようです。ありがとう！
— jmojico
6

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

  • IISを開きます

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

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

  • 「NETWORKSERVICE」および「IISAppPool \ DefaultAppPool」のC：ドライブ上のフォルダーに適切なアクセス許可を追加します

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

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

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

— フォレマロ
ソース
3

IE 9：ユーザーがサーバーに投稿する前に画像を確認する場合：ユーザーは「信頼できるWebサイトリスト」にWebサイトを追加する必要があります。

— United4Peace
ソース
3

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>
— ラビンドラ・ヴァイラギ
ソース
Chromeはコンソールに「ローカルリソースの読み込みを許可されていません」というエラーをスローします。
— raosaeedali 2018年
1
@raosaeedali応答が遅くなってすみません。ローカルドライブからHTMLページのimgタグに画像を直接表示する場合は、相対パスを指定する必要があります。別の解決策は、入力タイプのファイルからファイルパスを取得し、ファイルソースをこのためのimgタグに割り当てることです。コードを更新しました。
— RavindraVairagi18年
@RavindraVairagiエクスプローラーでファイルを選択せず​​に画像を表示する方法はありますか？スクリプトを使用しようとしましたが、「ローカルリソースの読み込みが許可されていません」というエラーは表示されませんでしたが、画像が存在する場合は、画像を直接印刷する方法を見つけたいと思います...
— BandolerasAug
2

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

— ジャック・ケリー
ソース
できない限り。私は質問で多くの文脈を与えていません、私は知っています:)しかし、この場合、私たちは実際に知ることができます。
— PeterV 2010年
5
もし彼がオフィスに10人のユーザーしかいないとしたらどうでしょう。すべてのユーザーがWindows環境を持ち、c：\ localfile.jpgに正しい画像があります。そのために...彼は正しい画像がそこにあることを完全に知るだけでなく、それらを制御することもできるでしょう。
— ナスカ2014年
彼の要件は非常に限られた対象者にサービスを提供するWindows環境であるため、この質問は有効です。たとえば、ArduinoベースのWebサーバーを設計しているときに同じ問題が発生しました。このサーバーでは、クライアントはArduinoサーバーと同じLAN上のWindowsPCのみでした。Arduinoはクライアントに画像を提供するのが遅すぎたので、クライアントマシン自体に画像を保存する必要がありました。
— PrashanD 2017年
1

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

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

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

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

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

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

— フアンメンデス
ソース
1

グーグルクロームブラウザを使用している場合は、このように使用できます

<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">
— Sachindra N. Pandey
ソース
3
Chromeでは機能しませんでしたが、IEでは機能しますか？
— タコ
0

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

— フォールンリーパー
ソース
0

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

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

— takanuva15
ソース
0

私は多くのテクニックを試しましたが、最終的にC＃側とJS側で1つ見つけました。src属性への物理パスを指定することはできませんが、base64文字列をsrc toImgタグとして指定することはできます。以下のC＃コード例を見てみましょう。

<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>

C＃コード

 if (File.Exists(filepath)
                            {
                                byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
                                string base64ImageRepresentation = Convert.ToBase64String(imageArray);
                                var val = $"data: image/png; base64,{base64ImageRepresentation}";
                                imgEvid.Attributes.Add("src", val);
                            }

これが役立つことを願っています

— ネイブドカーン
ソース
0

で始まり、file:///で終わるfilenameはずです：

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
— スティーブ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.