Come visualizzare immagini locali in Chrome usando il file: // protocol?

23

Mi piacerebbe essere in grado di specificare un percorso di file locale per un'immagine su una pagina Web fornita tramite http utilizzando Chrome: è possibile?

Ricordo di averlo fatto usando IE ma non ricordo come! Alcune impostazioni attendibili penso ...

google-chrome url pictures

— JSH
fonte

14

puoi convertire l'immagine in codice base-64, ad esempio con " http://duri.me/ " e copiare il risultato sul browser! Piace:

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

— Diogo Cid
fonte

7

Queste informazioni potrebbero essere utili a qualcuno, ma penso che non risponda davvero a questa domanda.

— G-Man dice "Ripristina Monica" il

12

Poiché hai citato "Chrome", puoi utilizzare le estensioni di Chrome per fare ciò, per consentire l'accesso locale ai tuoi file.

Segui questi passi:

1) Nella cartella locale in cui si trovano le tue immagini, crea questo file chiamato "manifest.json" e inserisci questo:

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

2) Metti questa è la barra degli indirizzi di Chrome: chrome: // extensions /

3) Assicurati che la 'Modalità sviluppatore' sia selezionata (in alto a destra della pagina)

4) Fare clic sul pulsante "Carica estensione non compressa"

5) Passare alla cartella locale in cui si trovano le immagini e il file manifest.json, fare clic su OK

6) L'estensione "File Exposer" dovrebbe ora essere elencata nell'elenco e avere un segno di spunta su "Abilitato". Se la cartella si trova su un'unità di rete o un'altra unità lenta o contiene molti file, potrebbero essere necessari almeno 10-20 secondi per essere visualizzati nell'elenco.

7) Nota la stringa 'ID' che è stata associata alla tua estensione. Questo è EXTENSION_ID

8) Ora nel tuo HTML puoi accedere al file con il seguente, cambiando 'EXTERNSION_ID' con qualunque ID generato dalla tua estensione:

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

Si noti che * .jpg è ricorsivo e corrisponderà automaticamente ai file nella cartella specificata e in tutte le sottocartelle, non è necessario specificare per ciascuna sottocartella. Inoltre, è sensibile al maiuscolo / minuscolo.

Nel tag 'img' non si specifica la cartella originale, il relativo relativo da quella cartella, quindi è necessario specificare solo le sottocartelle.

Se modifichi il file manifest.json, dovrai fare clic sul link "Ricarica (Ctrl + R)" accanto all'estensione.

— Rob Donovan
fonte

8

Le pagine Web non locali non possono accedere ai file locali in Chrome o in qualsiasi browser Web moderno.

Puoi ignorarlo usando LocalLinks ( per Firefox ), ma funzionerà solo sul tuo computer.

— grawity
fonte

2

non funzionerà per le immagini

— Willem D'Haeseleer,

Penso che Chrome sia stupido, stavo provando su una about:blankpagina e non me lo permetteva, mi sono stancato di aprire un file HTML locale e ha funzionato, anche per le immagini nonostante ciò che ha detto @ WillemD'Haeseleer. Il mio codice era questo:drawing = new Image(); drawing.src = "C:/Users/S/Videos/net.png";

— Shayan il

2

in Chrome sembra così

file:///C:/sample.txt

— KutscheraIT
fonte

Sto dopo aver fatto qualcosa del genere, ospitato sul web, ma guardando i file locali degli utenti .... <! 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 =" Content-Type "content =" text / html; charset = utf -8 "/> <title> esempio </title> </head> <body> <img src =" file: /// c: /graphics/image.jpg "height =" 200px "width =" 200px "/ > <h1> Benvenuto </h1> <p> Ciao mondo! </p> </body> </html>

— JSH,

1

Ho appena provato i file .html e .jpg con il file: /// notation, entrambi sono stati renderd correttamente. Potresti pubblicare uno screenshot che mostra la barra degli indirizzi e parte del contenuto?

— KutscheraIT,

prova jsh.learningict.net - ovviamente l'immagine che non avrai ma il codice ti mostra un'idea di ciò che sto

— cercando

Posso solo supporre che ti riferisca al tag immagine, che funziona anche bene quando sostituisco src con <img src = "file: /// c: \ test.jpg" height = "200px" width = "200px" > c: \ test.jpg è un jpg valido in quel percorso e mostra bene.

— KutscheraIT

ti chiedi se è una cosa osx allora? ref ref funziona bene da solo nella barra degli indirizzi di Chrome, ma non nel codice HTML

— JSH

2

Se si desidera testare l'immagine locale sul sito live, è possibile eseguire il server Web locale e impostare l'URL come http://127.0.0.1:8123/img.jpg sulla pagina utilizzando DevTools

Esistono diversi modi per eseguire un server Web: 1. Estensione per il browser "Web Server per Chrome" con cartella definita https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Se hai Python, esegui il server http incorporato nella cartella scelta

python3 -m http.server 8123 # versione
python 3 python -m SimpleHTTPServer 8123 # versione python 2
Usa un server pronto per la produzione come nginx , apache

— koxt
fonte

0

Nel mio caso, dovevo solo vedere come sarebbe una piccola modifica dell'immagine in diverse dimensioni reattive. È stato più semplice salvare come ... una pagina Web completa sul desktop e aprirla invece. Ispeziono e modifico l'immagine src.

— changokun
fonte

Ciò non sembra affatto quello che stava chiedendo l'OP, nemmeno collegato. Leggere attentamente le domande e non rispondere o commentare se non si dispone di informazioni pertinenti da aggiungere.

— music2myear il

1

Ma è quello che stavo cercando

— Samuel Thompson,

-1

Okay, non puoi permettere a qualcun altro di accedere al tuo file system locale! Avresti bisogno di un servizio server come Apache, lascia che il tuo computer funzioni 24 ore al giorno, assicurati che non si surriscaldi, ti preoccupi per una buona sicurezza e molto altro ancora per renderlo possibile. E poiché l'amministrazione del server è costosa e richiede molto tempo, la maggior parte delle persone lascia che i professionisti ospitino le nostre cose per noi (Webhosting).

In conclusione, se non si desidera eseguire il proprio server, è molto più semplice caricarlo sul proprio webhoster preferito.

— user759576
fonte

2

La domanda non è di lasciare a Internet file di accesso di grandi dimensioni sul sistema locale.

— xenoide,