Warum kann ich <img src = "C: /localfile.jpg"> nicht ausführen?

93

Es funktioniert, wenn die HTML-Datei lokal ist (auf meinem C-Laufwerk), aber nicht, wenn sich die HTML-Datei auf einem Server befindet und die Image-Datei lokal ist. Warum ist das so?

Mögliche Problemumgehungen?

javascript html filesystems src PeterV
quelle
3
Darf ich fragen, warum Sie so etwas tun möchten?
Boris Callens
2
@BorisCallens Zum Beispiel möchte ich möglicherweise die Änderung eines Bildes auf meiner Staging-Website testen, wenn ich das neue Bild auf meinem eigenen Computer habe und nicht den gesamten Prozess des Hochladens auf das Staging durchlaufen möchte. Der einzige Weg, dies zu tun, besteht darin, das Image in der Entwicklungsumgebung zu ändern, anstatt es trotzdem bereitzustellen.
Xji
Es ist auch eine großartige Möglichkeit, Ihren weniger technisch kompetenten Bekannten einen Witz zu machen und sie glauben zu lassen, Sie hätten sich in eine Website gehackt.
0112
Eine andere Möglichkeit, dies schnell zu tun, besteht darin, die Datei hochzuladen, um zu sagen, Google Drive oder was auch immer, dann kopieren Sie die Bild-URL und fügen Sie sie einsrc=""
0112
Verwenden Sie einfach einen Entwicklungswebserver auf Ihrem Computer. Es ist heutzutage einfach, da sogar PHP mit einem eingebauten kommt.
MauganRa

Antworten:

62

Es wäre eine Sicherheitslücke, wenn der Client lokale Dateisystemdateien anfordern und dann mithilfe von JavaScript herausfinden könnte, was darin enthalten ist.

Die einzige Möglichkeit, dies zu umgehen, besteht darin, eine Erweiterung in einem Browser zu erstellen. Firefox-Erweiterungen und IE-Erweiterungen können auf lokale Ressourcen zugreifen. Chrome ist viel restriktiver.

Björn
quelle
1
Javier
1
Dies wurde positiv bewertet, weil es auf das Warum antwortete und einige Möglichkeiten gab, es zu umgehen. Was ich wahrscheinlich tun werde (und ich weiß, dass ich nicht viel Hintergrundwissen bereitgestellt habe), ist einen lokalen Webserver zu erstellen, um lokale Bilder bereitzustellen. Auf diese Weise kann der Browser sie anzeigen.
PeterV
1
Flash kann nur mit einer vorhandenen Richtliniendatei auf lokale Ressourcen zugreifen. Andernfalls wird der lokale Modus aktiviert und auf andere Weise eingeschränkt.
Björn
2
Diese paranoide Sicherheit ist nur eine Störung. Sie können Benutzerdateien mit AJAX aus einem Formular mit dem Feld <input type = file> auf den Server hochladen. Wenn Sie jedoch nett zum Benutzer sein und eine Vorschau anzeigen möchten, MÜSSEN Sie den Roundtrip durchführen und die Datei in den Server hochladen Server zuerst. Wie ist es sicherer, als das Vorschaubild lokal zu generieren?
MKaama
2
Um dem Benutzer eine schöne Vorschau zu zeigen, MÜSSEN Sie zuerst eine runde Reise zum Server machen. Mit AJAX ist das möglich. Wie ist das Hochladen einer Datei auf den Server zuerst sicherer als das lokale Generieren des Vorschaubilds? Die paranoide Sicherheit schafft nur Störungen, löst aber kein Problem.
MKaama
29

sollten Sie nicht "file: // C: /localfile.jpg" anstelle von "C: /localfile.jpg" verwenden?

AndreDurao
quelle
26

Browser dürfen nur dann auf das lokale Dateisystem zugreifen, wenn Sie auf eine lokale HTML-Seite zugreifen. Sie müssen das Bild irgendwo hochladen. Wenn es sich im selben Verzeichnis wie die HTML-Datei befindet, können Sie es verwenden<img src="localfile.jpg"/>

Newtang
quelle
17

C:ist kein anerkanntes URI-Schema. Versuchen Sie es file://c|/...stattdessen.

Ignacio Vazquez-Abrams
quelle
6

Ehrlich gesagt war der einfachste Weg, dem Server ein Datei-Hosting hinzuzufügen.

  • Öffnen Sie IIS

  • Fügen Sie unter Standardwebsite ein virtuelles Verzeichnis hinzu

    • Der virtuelle Pfad ist das, wonach Sie im Browser suchen möchten. Wenn Sie also " Servername / Bilder " auswählen, können Sie zu diesem Server navigieren, indem Sie zu http: // Servername / Bilder gehen
    • Fügen Sie dann den physischen Pfad auf dem Laufwerk C: hinzu

  • Fügen Sie dem Ordner auf dem Laufwerk C: die entsprechenden Berechtigungen für "NETWORK SERVICE" und "IIS AppPool \ DefaultAppPool" hinzu.

  • Standardwebsite aktualisieren

  • Und du bist fertig. Sie können jetzt zu jedem Bild in diesem Ordner navigieren, indem Sie zu http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg navigieren und diese URL in Ihrem img src verwenden

Hoffe das hilft jemandem

Foremaro
quelle
3

IE 9: Wenn Sie möchten, dass der Benutzer ein Bild betrachtet, bevor er es auf dem Server veröffentlicht: Der Benutzer sollte die Website zur "Liste vertrauenswürdiger Websites" hinzufügen.

United4Peace
quelle
3

Wir können FileReader () von javascript und die Funktion readAsDataURL (fileContent) verwenden, um die lokale Laufwerks- / Ordnerdatei anzuzeigen . Binden Sie das Änderungsereignis an das Bild und rufen Sie dann die showpreview-Funktion von Javascript auf. Versuche dies -

<!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>
Ravindra Vairagi
quelle
Chrome gibt in der Konsole den Fehler "Lokale Ressource darf nicht geladen werden" aus.
Raosaeedali
1
@raosaeedali Entschuldigung für die späte Antwort. Wenn wir Bilder vom lokalen Laufwerk direkt in unserem img-Tag der HTML-Seite anzeigen möchten, müssen wir einen relativen Pfad angeben. Eine andere Lösung besteht darin, den Dateipfad aus einer Eingabetypdatei abzurufen und die Dateiquelle dem img-Tag zuzuweisen. Dazu habe ich den Code aktualisiert.
Ravindra Vairagi
@ RavindraVairagi Gibt es eine Möglichkeit, das Bild anzuzeigen, ohne eine Datei im Explorer auszuwählen? Ich habe versucht, Ihr Skript zu verwenden, und ich habe nicht den Fehler "Lokale Ressource darf nicht geladen werden" erhalten, aber ich möchte einen Weg finden, das Bild direkt zu drucken, falls vorhanden ...
Bandoleras
2

Abgesehen von Newtangs Beobachtung der Sicherheitsregeln, woher wissen Sie, dass jeder, der Ihre Seite anzeigt, die richtigen Bilder hat c:\localfile.jpg? Das kannst du nicht. Selbst wenn du denkst, dass du es kannst, kannst du es nicht. Zum einen setzt es eine Windows-Umgebung voraus.

Jack Kelly
quelle
Es sei denn du kannst. Ich habe in der Frage nicht viel Kontext angegeben, ich weiß :) Aber in diesem Fall können wir es tatsächlich wissen.
PeterV
5
Was ist, wenn er nur 10 Benutzer in einem Büro haben möchte, die alle über Windows-Umgebungen und die richtigen Bilder unter c: \ localfile.jpg verfügen? Zu diesem Zweck ... wäre er in der Lage, nicht nur zu wissen, dass die richtigen Bilder vorhanden sind, sondern sie auch zu kontrollieren.
Nazca
Diese Frage ist gültig, da er eine Windows-Umgebung benötigt, die nur einem sehr begrenzten Publikum dient. Zum Beispiel stieß ich beim Entwurf eines Arduino-basierten Webservers auf dasselbe Problem, bei dem der einzige Client ein Windows-PC im selben LAN wie der Arduino-Server war. Das Arduino war zu langsam beim Bereitstellen von Bildern für den Client, sodass ich die Bilder auf dem Client-Computer selbst speichern musste.
PrashanD
1

Ich sehe zwei Möglichkeiten für das, was Sie versuchen zu tun:

  1. Sie möchten, dass Ihre Webseite, die auf einem Server ausgeführt wird, die Datei auf dem Computer findet, auf dem Sie sie ursprünglich entworfen haben?

  2. Sie möchten, dass es von dem PC abgerufen wird, der auf der Seite angezeigt wird?

Option 1 macht einfach keinen Sinn :)

Option 2 wäre eine Sicherheitslücke. Der Browser verhindert, dass eine Webseite (die aus dem Internet bereitgestellt wird) Inhalte auf den Computer des Betrachters lädt.

Kyle Hudson hat dir gesagt, was du tun musst, aber das ist so grundlegend, dass ich es schwer finde zu glauben, dass dies alles ist, was du tun willst.

Juan Mendes
quelle
1

Wenn Sie den Google Chrome-Browser verwenden, können Sie diesen verwenden

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

Wenn Sie jedoch Mozila Firefox verwenden, müssen Sie "Datei" hinzufügen, z.

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
Sachindra N. Pandey
quelle
3
Das hat bei mir in Chrome nicht funktioniert, aber im IE?
Krake
0

Sie müssen das Bild ebenfalls hochladen und dann mit dem Bild auf dem Server verknüpfen.

Kyle Hudson
quelle
0

Was ist, wenn das Bild vom Benutzer ausgewählt wird? Verwenden Sie ein input: file-Tag und zeigen Sie es nach Auswahl des Bildes auf der clientseitigen Webseite an. Das ist für die meisten Dinge machbar. Im Moment versuche ich, es für IE zum Laufen zu bringen, aber wie bei allen Microsoft-Produkten ist es ein Cluster Fork ().

Fallenreaper
quelle
0

Wenn Sie eine lokale Website nur für sich selbst oder bestimmte Clients bereitstellen, können Sie dies mklink /D MyImages "C:/MyImages"umgehen, indem Sie im Stammverzeichnis der Website als Administrator in cmd ausgeführt werden. Dann verbindet do im HTML- <img src="MyImages/whatever.jpg">Code und die von mklink hergestellte symbolische Verknüpfung die relative src-Verknüpfung mit der Verknüpfung auf Ihrem C-Laufwerk. Es hat dieses Problem für mich gelöst und kann anderen helfen, die zu dieser Frage kommen.

(Offensichtlich funktioniert dies nicht für öffentliche Websites, da Sie cmd-Befehle nicht einfach auf den Computern von Personen ausführen können.)

takanuva15
quelle
0

Ich habe viele Techniken ausprobiert und schließlich eine in C # -Seite und JS-Seite gefunden. Sie können dem src-Attribut keinen physischen Pfad zuweisen, aber Sie können die base64-Zeichenfolge als src für das Img-Tag angeben. Schauen wir uns das folgende C # -Codebeispiel an.

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

C # -Code

 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);
                            }

Hoffe das wird helfen

Naveed Khan
quelle
0

beginnt mit file:///und endet mit filenamesollte funktionieren:

<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">
Steve
quelle