Perché non posso fare <img src = “C: /localfile.jpg”>?

96

Funziona se il file html è locale (sulla mia unità C), ma non se il file html è su un server e il file immagine è locale. Perché?

Eventuali soluzioni alternative?

— PeterV
fonte

3

Posso chiederti perché vorresti fare una cosa del genere?

— Boris Callens

2

@BorisCallens Ad esempio, potrei voler testare la modifica di un'immagine sul mio sito Web di staging, quando ho la nuova immagine sulla mia macchina e non voglio passare attraverso l'intero processo di caricamento nello staging. Sembra che l'unico modo per farlo sarebbe cambiare l'immagine nell'ambiente di sviluppo invece di mettere in scena comunque.

— xji

È anche un ottimo modo per fare uno scherzo ai tuoi conoscenti meno tecnicamente competenti, facendoli pensare che hai violato un sito web.

— 0112

Un altro modo per farlo rapidamente è caricare il file per dire, google drive o qualsiasi altra cosa, quindi copiare l'URL dell'immagine e incollarlo all'internosrc=""

— 0112

Usa semplicemente un server web di sviluppo sulla tua macchina. È facile al giorno d'oggi poiché anche PHP ne ha uno integrato.

— MauganRa

64

Sarebbe una vulnerabilità di sicurezza se il client potesse richiedere i file del file system locale e quindi utilizzare JavaScript per capire cosa contengono.

L'unico modo per aggirare questo è creare un'estensione in un browser. Le estensioni di Firefox e le estensioni di IE possono accedere alle risorse locali. Chrome è molto più restrittivo.

— Bjorn
fonte

1

tuttavia, flash riesce ad accedere a tutto ciò che l'utente seleziona, anche in Chrome

— Javier

1

Votato questo perché ha risposto al perché e ha fornito alcuni modi per aggirarlo. Quello che probabilmente farò (e so di non aver fornito molto background) è creare un server web locale per servire immagini locali. In questo modo il browser può visualizzarli.

— PeterV

1

Flash può accedere solo alle risorse locali con un file di criteri installato o altrimenti entra in modalità locale e viene limitato in altri modi.

— Bjorn

2

Questa sicurezza paranoica è solo un disturbo. È POSSIBILE caricare i file utente sul server con AJAX da un modulo con il campo <input type = file>, ma se vuoi essere gentile con l'utente e mostrare un'anteprima, DEVI fare il round trip e caricare il file sul prima il server. In che modo è più sicuro che generare l'immagine di anteprima in locale?

— MKaama

2

Per mostrare all'utente una bella anteprima DEVI FARE prima UN GIRO AL SERVER. È possibile con AJAX. In che modo caricare prima un file sul server è più sicuro che generare l'immagine di anteprima in locale? La sicurezza paranoica crea solo disturbo, ma non risolve alcun problema.

— MKaama

31

non dovresti usare "file: // C: /localfile.jpg" invece di "C: /localfile.jpg"?

— AndreDurao
fonte

27

Ai browser non è consentito accedere al file system locale a meno che non si acceda a una pagina html locale. Devi caricare l'immagine da qualche parte. Se si trova nella stessa directory del file html, puoi usare<img src="localfile.jpg"/>

— Newtang
fonte

Stavo cercando di ottenere lo stesso risultato utilizzando il percorso assoluto "/localfile.jpg" ma sembra che il browser lo prenda come una "immagine web" e non lo trovi. Grazie!

— jmojico

18

C:non è uno schema URI riconosciuto. Prova file://c|/...invece.

— Ignacio Vazquez-Abrams
fonte

6

Onestamente il modo più semplice era aggiungere l'hosting di file al server.

Apri IIS
Aggiungi una directory virtuale nel sito Web predefinito
- il percorso virtuale sarà quello che desideri esplorare nel browser. Quindi se scegli " serverName / images sarai in grado di sfogliarlo andando su http: // serverName / images
- Quindi aggiungi il percorso fisico sull'unità C :.
Aggiungere le autorizzazioni appropriate alla cartella sull'unità C: per "SERVIZIO DI RETE" e "IIS AppPool \ DefaultAppPool"
Aggiorna sito Web predefinito
E hai finito. Ora puoi passare a qualsiasi immagine in quella cartella navigando su http: //yourServerName/wwhatYourFolderNameIs/yourImage.jpg e utilizzare quell'URL nel tuo img src

Spero che questo aiuti qualcuno

— foremaro
fonte

3

IE 9: Se si desidera che l'utente dia un'occhiata all'immagine prima di pubblicarla sul server: L'utente deve AGGIUNGERE il sito Web a "elenco siti Web affidabili".

— United4Peace
fonte

3

possiamo usare FileReader () di javascript e la sua funzione readAsDataURL (fileContent) per mostrare il file dell'unità / cartella locale. Associa l'evento di modifica all'immagine, quindi chiama la funzione showpreview di javascript. Prova questo -

<!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
fonte

Chrome genera un errore nella console "Non è consentito caricare la risorsa locale".

— raosaeedali

1

@raosaeedali Ci scusiamo per la risposta in ritardo. Se vogliamo visualizzare direttamente le immagini dall'unità locale nel nostro tag img della pagina HTML, dobbiamo fornire il percorso relativo. Un'altra soluzione è ottenere il percorso del file da un file di tipo di input e assegnare l'origine del file al tag img per questo ho aggiornato il codice.

— Ravindra Vairagi

@RavindraVairagi c'è un modo per visualizzare l'immagine senza scegliere un file nell'explorer? Ho provato a utilizzare il tuo script e non ho ottenuto l'errore di "Non è consentito caricare la risorsa locale" ma desidero trovare un modo per stampare direttamente l'immagine, se esiste ...

— Bandoleras

2

A parte l'osservazione di Newtang sulle regole di sicurezza, come fai a sapere che chiunque visualizzi la tua pagina avrà le immagini corrette c:\localfile.jpg? Non puoi. Anche se pensi di poterlo fare, non puoi. Presuppone un ambiente Windows, per prima cosa.

— Jack Kelly
fonte

A meno che tu non possa. Non ho dato molto contesto alla domanda, lo so :) Ma in questo caso possiamo davvero saperlo.

— PeterV

5

E se avesse intenzione di avere solo 10 utenti in un ufficio con tutti gli ambienti Windows e le immagini corrette in c: \ localfile.jpg. A tal fine ... sarebbe completamente in grado non solo di sapere che ci sono le immagini corrette, ma anche di controllarle.

— Nazca

Questa domanda è valida perché il suo requisito è per un ambiente Windows, che serve un pubblico molto limitato. Ad esempio, ho riscontrato lo stesso problema durante la progettazione di un server Web basato su Arduino in cui l'unico client era un PC Windows sulla stessa LAN del server Arduino. Arduino era troppo lento nel fornire le immagini al client, quindi avevo bisogno di memorizzare le immagini sulla macchina client stessa.

— PrashanD

1

Vedo due possibilità per ciò che stai cercando di fare:

Vuoi che la tua pagina web, in esecuzione su un server, trovi il file sul computer su cui l'hai originariamente progettato?
Vuoi che lo recuperi dal pc che sta visualizzando nella pagina?

L'opzione 1 non ha senso :)

L'opzione 2 rappresenterebbe una falla di sicurezza, il browser vieta a una pagina Web (servita dal Web) di caricare contenuti sul computer del visualizzatore.

Kyle Hudson ti ha detto cosa devi fare, ma è così semplice che trovo difficile credere che questo sia tutto ciò che vuoi fare.

— Juan Mendes
fonte

1

se utilizzi il browser Google Chrome puoi utilizzarlo in questo modo

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

Ma se usi Mozila Firefox devi aggiungere "file" ex.

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

— Sachindra N. Pandey
fonte

3

Non ha funzionato per me in Chrome, ma funziona in IE?

— polpo

0

È necessario caricare anche l'immagine, quindi collegarla all'immagine sul server.

— Kyle Hudson
fonte

0

che ne dici di avere l'immagine come qualcosa selezionato dall'utente? Utilizzare un input: tag file e poi, dopo aver selezionato l'immagine, mostrarla sulla pagina web del client? Questo è fattibile per la maggior parte delle cose. In questo momento sto cercando di farlo funzionare per IE, ma come con tutti i prodotti Microsoft, è un fork del cluster ().

— Fallenreaper
fonte

0

Se stai distribuendo un sito Web locale solo per te o per determinati client, puoi aggirare il problema eseguendo mklink /D MyImages "C:/MyImages"nella directory principale del sito Web come amministratore in cmd. Quindi in html, do <img src="MyImages/whatever.jpg">e il collegamento simbolico stabilito da mklink collegherà il relativo collegamento src con il collegamento sul tuo drive C. Ha risolto questo problema per me, quindi può aiutare gli altri che arrivano a questa domanda.

(Ovviamente questo non funzionerà per i siti Web pubblici poiché non è possibile eseguire facilmente i comandi cmd sui computer delle persone)

— takanuva15
fonte

0

Ho provato molte tecniche e alla fine ne ho trovata una in C # side e JS Side. Non puoi dare un percorso fisico all'attributo src ma puoi dare la stringa base64 come src al tag Img. Esaminiamo il seguente esempio di codice C #.

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

Codice C #

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

Spero che questo ti aiuti

— Naveed Khan
fonte

0

inizia con file:///e finisce con filenamedovrebbe funzionare:

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

— Steve
fonte