Wie zeige ich lokale Bilder in Chrome mit file: // protocol an?


23

Ich möchte in der Lage sein, einen lokalen Dateipfad für ein Bild auf einer Webseite anzugeben, die über http mit Chrome bereitgestellt wird. Ist dies möglich?

Ich erinnere mich, dies mit IE getan zu haben, kann mich aber nicht erinnern, wie! Einige vertrauenswürdige Einstellungen, denke ich ...

Antworten:


14

Sie können das Bild in Base-64-Code konvertieren, zum Beispiel mit " http://duri.me/ " und das Ergebnis in den Browser kopieren! Mögen:

<img width='16' height='16'  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAApklEQVQ4jWP8//8/Ay5Q4s6GU7Jn5y9GBgYGBiacuokELKTYSpQByKB68UkMMUExQ0ZkPsVeYEQPREZGRpK8gOGCdy/PwTEyH8ZGF8MbBgwMDAxC4kZ4xfAaALMFGfz//5+6gYjXBS+fXUHhaxjEMqKrQXGBglU8SgyIS+mgYHR5DAPIAYz////HavL5DQVwtmHABAyND44tZGRgwBMG2DRhAxR7AQBhgT3yD6eBRwAAAABJRU5ErkJggg=='>

7
Diese Informationen können für jemanden von Nutzen sein, aber ich denke, dass sie diese Frage nicht wirklich beantworten.
G-Man sagt, dass Monica

12

Da Sie "Chrome" erwähnt haben, können Sie dazu Chrome-Erweiterungen verwenden, um den lokalen Zugriff auf Ihre Dateien zu ermöglichen.

Folge diesen Schritten:

1) Erstellen Sie in dem lokalen Ordner, in dem sich Ihre Bilder befinden, diese Datei mit dem Namen "manifest.json" und geben Sie Folgendes ein:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Geben Sie hier Ihre Chrome-Adresszeile ein: chrome: // extensions /

3) Vergewissern Sie sich, dass der Entwicklermodus aktiviert ist (oben rechts auf der Seite).

4) Klicken Sie auf die Schaltfläche 'Load Unpacked Extension'

5) Navigieren Sie zu dem lokalen Ordner, in dem sich die Bilder und die manifest.json-Datei befinden, und klicken Sie auf OK

6) Die Erweiterung "File Exposer" sollte nun in der Liste aufgeführt sein und ein Häkchen vor "Aktiviert" haben. Wenn sich der Ordner auf einem Netzwerklaufwerk oder einem anderen langsamen Laufwerk befindet oder viele Dateien enthält, kann es 10 bis 20 Sekunden oder länger dauern, bis er in der Liste angezeigt wird.

7) Notieren Sie sich die 'ID'-Zeichenfolge, die Ihrer Erweiterung zugeordnet wurde. Dies ist die EXTENSION_ID

8) Jetzt können Sie in Ihrem HTML-Code wie folgt auf die Datei zugreifen und die 'EXTERNSION_ID' in die ID ändern, die Ihre Erweiterung generiert hat:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Beachten Sie, dass die * .jpg-Datei rekursiv ist und automatisch Dateien im angegebenen Ordner und allen Unterordnern entspricht, die Sie nicht für jeden Unterordner angeben müssen. Beachten Sie auch die Groß- und Kleinschreibung.

In dem 'img'-Tag geben Sie nicht den ursprünglichen Ordner an, der relativ zu diesem Ordner ist, sodass nur Unterordner angegeben werden müssen.

Wenn Sie die Datei manifest.json ändern, müssen Sie neben der Erweiterung auf den Link "Neu laden (Strg + R)" klicken.


8

Nicht lokale Webseiten können nicht auf lokale Dateien in Chrome oder einem modernen Webbrowser zugreifen .

Sie können dies mit LocalLinks ( für Firefox ) außer Kraft setzen, dies funktioniert jedoch nur auf Ihrem eigenen Computer.


2
funktioniert nicht für Bilder
Willem D'Haeseleer

Ich denke, Chrom ist dumm, ich habe versucht, eine about:blankSeite zu bearbeiten, und es wurde nicht zugelassen. Ich hatte es satt, eine lokale HTML-Datei zu öffnen, und es hat funktioniert, auch für Bilder, obwohl @ WillemD'Haeseleer das gesagt hat. Mein Code war:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";
Shayan

2

In Chrome sieht das so aus

file:///C:/sample.txt

Ich bin nach so etwas wie dies zu tun, auf Web - hosted, aber zu einem Benutzer auf lokale Dateien suchen .... <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 =" Inhaltstyp "content =" text / html; charset = utf -8 "/> <title> Beispiel </ title> </ head> <body> <img src =" file: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> Willkommen </ h1> <p> Hallo Welt! </ p> </ body> </ html>
JSH

1
Ich habe gerade versucht .html- und .jpg-Dateien mit der Notation file: ///, beide wurden korrekt gerendert. Könnten Sie einen Screenshot veröffentlichen, der die Adressleiste und einige Inhalte zeigt?
KutscheraIT

versuchen Sie jsh.learningict.net - offensichtlich das Bild, das Sie nicht haben, aber der Code zeigt Ihnen eine Vorstellung davon, was ich bin
JSH

Ich kann nur vermuten, dass Sie sich auf das Bild-Tag beziehen, was auch gut funktioniert, wenn ich den Quellcode durch <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" ersetze. > c: \ test.jpg ist ein gültiges jpg in diesem Pfad und wird gut angezeigt.
KutscheraIT

frage mich, ob es dann eine osx Sache ist? Der src-Verweis funktioniert gut allein in der Adressleiste von Chrome, nur nicht im HTML-Code
JSH

2

Wenn Sie das lokale Image auf der Live-Site testen möchten, können Sie mit DevTools einen lokalen Webserver ausführen und eine URL wie http://127.0.0.1:8123/img.jpg auf Seite festlegen

Es gibt verschiedene Möglichkeiten, einen Webserver zu betreiben: 1. Erweiterung für den Browser "Web Server for Chrome" mit definiertem Ordner https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

  1. Wenn Sie Python haben, führen Sie den eingebetteten http-Server im ausgewählten Ordner aus

    python3 -m http.server 8123 # python 3 version
    python -m SimpleHTTPServer 8123 # python 2 version

  2. Verwenden Sie produktionsfertige Server wie Nginx , Apache


0

In meinem Fall musste ich nur sehen, wie eine kleine Bildänderung in verschiedenen reaktionsschnellen Größen aussehen würde. Es war am einfachsten, eine komplette Webseite auf dem Desktop zu speichern und diese stattdessen zu öffnen. Ich inspiziere und bearbeite das Bild src.


Das scheint überhaupt nicht das zu sein, wonach OP gefragt hat, nicht einmal im Zusammenhang. Bitte lesen Sie die Fragen sorgfältig durch und beantworten oder kommentieren Sie sie nur, wenn Sie relevante Informationen zum Hinzufügen haben.
music2myear

1
Aber es ist, was ich gesucht habe
Samuel Thompson

-1

Okay, Sie können nicht zulassen, dass jemand anderes auf Ihr lokales Dateisystem zugreift! Sie würden einen Server-Service wie Apache benötigen, Ihren Computer 24 Stunden am Tag laufen lassen, sicherstellen, dass er nicht überhitzt, für gute Sicherheit sorgen und vieles mehr, um dies überhaupt zu ermöglichen. Und weil die Serververwaltung teuer und zeitaufwändig ist, lassen die meisten Leute die Profis unsere Sachen für uns hosten (Webhosting).

Wenn Sie also keinen eigenen Server betreiben möchten, ist es viel einfacher, ihn einfach auf den Webhoster Ihrer Wahl hochzuladen.


2
Die Frage ist nicht, ob das Internet auf dem lokalen System große Zugriffsdateien zulässt.
Xenoid
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.