☰

Wie werden lokale Bilder in Chrome mit dem Protokoll file:// angezeigt?

tag-icon • tag-icon google-chrome url pictures
Wie werden lokale Bilder in Chrome mit dem Protokoll file:// angezeigt?

Ich möchte mit Chrome einen lokalen Dateipfad für ein Bild auf einer über http bereitgestellten Webseite angeben können. Ist das möglich?

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

Antwort1

Sie können das Bild in Base-64-Code umwandeln, zum Beispiel mit "https://www.base64-image.de/" und kopiere das Ergebnis in den Browser! Wie:

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

Antwort2

Da Sie „Chrome“ erwähnt haben, könnten Sie hierzu Chrome-Erweiterungen verwenden, um den lokalen Zugriff auf Ihre Dateien zu ermöglichen.

Folge diesen Schritten:

  1. Erstellen Sie im lokalen Ordner, in dem sich Ihre Bilder befinden, die Datei „manifest.json“ und geben Sie Folgendes ein:

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

  1. Geben Sie dies in Ihre Chrome-Adressleiste ein: chrome://extensions/

  2. Stellen Sie sicher, dass „Entwicklermodus“ aktiviert ist (oben rechts auf der Seite).

  3. Klicken Sie auf die Schaltfläche „Entpackte Erweiterung laden“

  4. Navigieren Sie zu dem lokalen Ordner, in dem sich die Bilder und die Datei manifest.json befinden, und klicken Sie auf „OK“.

  5. Die Erweiterung „File Exposer“ sollte jetzt in der Liste aufgeführt sein und ein Häkchen bei „Aktiviert“ haben. Wenn sich der Ordner auf einem Netzlaufwerk oder einem anderen langsamen Laufwerk befindet oder viele Dateien enthält, kann es 10–20 Sekunden oder länger dauern, bis er in der Liste angezeigt wird.

  6. Beachten Sie die ID-Zeichenfolge, die Ihrer Erweiterung zugeordnet wurde. Dies ist die EXTENSION_ID

  7. Jetzt können Sie in Ihrem HTML 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 *.jpg rekursiv ist und automatisch mit Dateien im angegebenen Ordner und allen Unterordnern übereinstimmt. Sie müssen nicht für jeden Unterordner eine Angabe machen. Beachten Sie auch, dass die Groß-/Kleinschreibung beachtet wird.

Im „img“-Tag geben Sie nicht den Originalordner an, sondern den relativen Ordner zu diesem, daher müssen nur Unterordner angegeben werden.

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

Antwort3

Nicht lokale Webseitenkann nicht auf lokale Dateien zugreifenin Chrome oder jedem modernen Webbrowser.

Sie können dies überschreiben mitLokale Links(für Firefox), aber es funktioniert nur auf Ihrem eigenen Computer.

Antwort4

Wenn Sie das lokale Bild auf der Live-Site testen möchten, können Sie den lokalen Webserver ausführen und die URL wie folgt festlegen:http://127.0.0.1:8123/img.jpgauf der Seite mit DevTools

Es gibt verschiedene Möglichkeiten einen Webserver zu betreiben: 1. Erweiterung für 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 embedded ausHTTP-Serverim gewählten Ordner

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

  2. Verwenden Sie produktionsbereite Server wienginx,Apache

verwandte Informationen