Img/ Visual studio code

di il
20 risposte

Img/ Visual studio code

Ciao a tutti, 

ho un problema che non riesco a risolvere. Quando inserisco il tag img nella pagina html in visual studio code, in anteprima browser non ci sono problemi di visualizzazione sino a quando il programma non viene chiuso. Alla riapetura anche se il tag è presente, l'immagine non viene più visualizzata (immagine non trovata) anche se nella cartella è presente e il tag non è stato modificato. 

Qualcuno può gentilmente aiutarmi a capire come risolvere il problema? Bisogna installare un'estensione?

Grazie a chi mi risponderà. 

20 Risposte

  • Re: Img/ Visual studio code

    19/06/2023 - nuvola ha scritto:


    Qualcuno può gentilmente aiutarmi a capire come risolvere il problema?

    Posta qualche dettaglio in più, ad esempio il codice che hai scritto, la struttura del progetto, la modalità con cui visualizzi la pagina all'interno del browser (usi un server Web?), ecc.

  • Re: Img/ Visual studio code

    Ovviamente l'immagine è un'img di prova. Inserita nella cartella del progetto (cartella > Sito XXX > all'interno file in formato .html + .css + img da inserire all'interno del progetto). 

    Visual studio code permette di creare un'anteprima nel browser (Firefox, Google Chrome) perciò ho installato l'estensione “Live Server” e visualizzo così. 

    il tag img così inserito funziona ma solo fino a quando non chiudo il programma. 

    Quando chiudo il programma e provo a visualizzare semplicemente “index.html” nel browser l'immagine non viene trovata anche se il tag c'è e non è stato modificato

  • Re: Img/ Visual studio code

    Ciao per le immagini devi usare la funzione upload. Le immagini con referenza esterna qui vengono bloccate 

  • Re: Img/ Visual studio code

    19/06/2023 - Toki ha scritto:


    Ciao per le immagini devi usare la funzione upload. Le immagini con referenza esterna qui vengono bloccate 

    in che senso? o meglio… dove trovo la funzione upload? 

  • Re: Img/ Visual studio code

    Devi usare il pulsante immagini presente nell'editor con cui si inviano i posts

  • Re: Img/ Visual studio code

    19/06/2023 - nuvola ha scritto:


    Ovviamente l'immagine è un'img di prova.

    Ok, chiarissimo, infatti questo aspetto credo non sia determinante.

    19/06/2023 - nuvola ha scritto:


    Inserita nella cartella del progetto (cartella > Sito XXX > all'interno file in formato .html + .css + img da inserire all'interno del progetto). 

    Prova magari a riportare parte del codice della pagina, o del CSS, limitatamente a ciò che può essere significativo per avere una idea di come hai importato l'immagine.

    19/06/2023 - nuvola ha scritto:


    Visual studio code permette di creare un'anteprima nel browser (Firefox, Google Chrome) perciò ho installato l'estensione “Live Server” e visualizzo così. 

    Perfetto. Questo è un dettaglio importante. Utilizzo anche io questa estensione, ma onestamente non ho mai riscontrato questo problema, per questo mi sembra molto strano. Deve essere una cosa assolutamente particolare o un caso molto “al limite”.

    19/06/2023 - nuvola ha scritto:


    il tag img così inserito funziona ma solo fino a quando non chiudo il programma. 

    Come dicevo, prova a riportare la parte interessata del codice HTML.

    19/06/2023 - nuvola ha scritto:


    Quando chiudo il programma e provo a visualizzare semplicemente “index.html” nel browser l'immagine non viene trovata anche se il tag c'è e non è stato modificato

    Quando dici “chiudo il programma”, ti riferisci a Visual Studio Code?
    Attenzione che il Live Server è una estensione di VSCode: se chiudi l'editor termini anche l'estensione, quindi il server di test non sarà più in funzione.

    Non vorrei che tu terminassi il server e visualizzassi comunque la pagina grazie a una cache, senza però poter raggiungere l'immagine in quanto il server - appunto - è stato terminato.

    In breve, VS Code e l'estensione Live Server devono essere in esecuzione quando testi la pagina.

  • Re: Img/ Visual studio code

    19/06/2023 - Alka ha scritto:


    Quando dici “chiudo il programma”, ti riferisci a Visual Studio Code?
    Attenzione che il Live Server è una estensione di VSCode: se chiudi l'editor termini anche l'estensione, quindi il server di test non sarà più in funzione.

    Non vorrei che tu terminassi il server e visualizzassi comunque la pagina grazie a una cache, senza però poter raggiungere l'immagine in quanto il server - appunto - è stato terminato.

    In breve, VS Code e l'estensione Live Server devono essere in esecuzione quando testi la pagina.

    Ho provato a testare questo punto ma senza successo. Ti spiego: se apro VSCode e clicco su Go Live, la pagina html si apre correttamente sul browser. 

    Se chiudo VSCode e apro solo index.html nel browser, le immagini non vengono trovate ma se riapro il VSCode le img continuano a non essere trovate neppure aggiornando il browser…

  • Re: Img/ Visual studio code

    19/06/2023 - Toki ha scritto:


    i presente nell'editor con cui si inviano i posts

    ti chiedo scusa… ma non riesco a capire… 

    dove trovo questo pulsante?

  • Re: Img/ Visual studio code

    Nella toolbar dell'editor con cui formatti i testi dei posts. È a destra del pulsante tabelle. 

  • Re: Img/ Visual studio code

    19/06/2023 - nuvola ha scritto:


    Se chiudo VSCode e apro solo index.html nel browser, le immagini non vengono trovate ma se riapro il VSCode le img continuano a non essere trovate neppure aggiornando il browser…

    Ok, ma come apri queste pagine? Che indirizzo usi?

    E riporta il codice HTML che hai scritto: per ogni evenienza vale la pena dare un'occhiata, ma è la terza volta che lo chiedo (senza successo).

  • Re: Img/ Visual studio code

    19/06/2023 - Alka ha scritto:


    19/06/2023 - nuvola ha scritto:


    Se chiudo VSCode e apro solo index.html nel browser, le immagini non vengono trovate ma se riapro il VSCode le img continuano a non essere trovate neppure aggiornando il browser…

    Ok, ma come apri queste pagine? Che indirizzo usi?

    E riporta il codice HTML che hai scritto: per ogni evenienza vale la pena dare un'occhiata, ma è la terza volta che lo chiedo (senza successo).

    come scritto prima…. 

    il codice inserito è: 

    <img src="/wolf-wallpaper-2560x1080_14.jpg">

    prima ci sono titoli o paragrafi… che non servono al fine di capire perchè l'immagine nell'anteprima browser non funziona. 

    Come apro queste pagine… nella cartella si crea un file index.html > apro semplicemente questo in anteprima browser che sia firefox o chrome… nient'altro.  

  • Re: Img/ Visual studio code

    19/06/2023 - Toki ha scritto:


    ll'editor con cui formatti i testi dei posts. È a destra del pulsante tabelle. 

    ti chiedo scusa ma quando scrivo in html o in css non mi si apre nessuna finestra per formattare i testi.. 

    devo digitare tutto.. senza usare alcun pulsante

  • Re: Img/ Visual studio code

    19/06/2023 - nuvola ha scritto:


    il codice inserito è: 

    <img src="/wolf-wallpaper-2560x1080_14.jpg">

    Quello “/” davanti al percorso non mi piace: a seconda dei casi, la root potrebbe cambiare.

    19/06/2023 - nuvola ha scritto:


    prima ci sono titoli o paragrafi… che non servono al fine di capire perchè l'immagine nell'anteprima browser non funziona. 

    Non ho idea di come possano titoli e paragrafi farti capire il problema sull'immagine.

    19/06/2023 - nuvola ha scritto:


    nella cartella si crea un file index.html > apro semplicemente questo in anteprima browser che sia firefox o chrome… nient'altro.

    Prova a riportare l'indirizzo della pagina che leggi nel browser, prima e dopo la chiusura di VSCode.

    Parlare di “aprire la pagina dopo aver chiuso VSCode” non ha senso: ribadisco, non puoi aprire quella pagina quando VSCode non è in esecuzione, perché il server che te la restituisce non è in esecuzione, quindi l'unico modo che hai di visualizzare la pagina è aprirla direttamente come file locale (con un doppio clic sul file HTML), ma in quel frangente è ovvio che i percorsi cambiano di riferimento, e che riavviare il Live Server di VSCode non ha alcun effetto se la pagina non viene aperta dal server ma direttamente accedendo al file locale.

    Continua a mancare qualcosa nella narrazione, che probabilmente viene omessa perché si crede non rilevante, ma che è la causa del problema.

  • Re: Img/ Visual studio code

    19/06/2023 - Alka ha scritto:


    Quello “/” davanti al percorso non mi piace: a seconda dei casi, la root potrebbe cambiare.

    le immagini sono tutte nella cartella principale del sito. non cambiano root. 

Devi accedere o registrarti per scrivere nel forum
20 risposte