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

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 ...

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=='>

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.

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.

In Chrome sieht das so aus

file:///C:/sample.txt

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

2. 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

3. Verwenden Sie produktionsfertige Server wie Nginx , Apache

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.

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.