<img> tag disattivato in firebug quindi trovato il motivo per cui l'immagine non viene visualizzata. Ho bisogno di aiuto per risolverlo

Question

Sto eseguendo il debug di un sito Web per le immagini mancanti. Il sito Web utilizza pesantemente GWT, quindi il codice sorgente non è così dettagliato. Ho iniziato il debugging con firebug e ho scoperto che i tag sono tutti in grigio nella fonte DOM firebug. Se modifico il tag immagine nella console di Firebug, ad esempio aggiungendo solo uno spazio, il tag dell'immagine non viene più visualizzato in grigio quindi viene visualizzato sulla pagina.

Può qualcuno qui per favore indicare perché i tag immagine sono disattivati ​​in firebug e come risolvere questo problema. Nota: ci sono altre immagini nella pagina che funzionano bene, anche se sono generate usando GWT nello stesso modo.

Answer 1

Molto probabilmente - l'immagine è nascosta (probabilmente tramite CSS). Clicca sul tag per vedere gli stili applicati ad esso - molto probabilmente vedrai display: none o qualcosa di simile effetto.
Sul motivo per cui le immagini sono nascoste - o le regole CSS sono confuse e hanno comportato un simile comportamento (Firebug dovrebbe aiutare con l'indagine) o è parte della logica dell'applicazione (nascondere la barra di avanzamento quando non è necessario, ecc.).

Answer 2

Nel mio caso la mia immagine è stata ombreggiata (grigia) in firebug a causa dell'immagine con la sua altezza e larghezza a 0 px così efficacemente era nascosta sullo schermo. quindi deduco che in grigio significa che non è visibile sullo schermo.

Answer 3

Avevo lo stesso problema. Firebug stava mostrando il mio elemento contenitore, che aveva una img, in grigio. L'elemento è stato visualizzato in Firefox (e in altri browser moderni), ma non in IE8.

Conoscere che stavo impostando il display: nessuno; e più tardi nella sceneggiatura bloccandola, non era il mio problema ... l'aggiunta di una larghezza e un'altezza mancanti nello stile era la soluzione per me.

Per me, era questione di impostare esplicitamente la larghezza e l'altezza sul mio div (che contiene il mio img) all'interno del contenitore div. Non avevo larghezza e altezza sul mio div in posizione assoluta. Non appena ho aggiunto che il gray out era solido in Firebug. Risolto anche il mio problema con div mancante in IE8! (Che era quello che mi ha impostato sul percorso di debug in primo luogo)

IE8 ha impostato la larghezza e l'altezza dei Mi piace, mentre a tutti gli altri browser moderni non importava e mostrava ancora il div. Firebug ha mostrato l'elemento in grigio, ma Firefox il browser ha visualizzato l'elemento div bene.

#slidesContainer { 
    position: relative; 
    width: 871px; 
    height: 275px; 
    padding: 8px 8px; 
    overflow: hidden; 
    } 

    #slidesContainer div { 
    position: absolute; 
    width: 871px; 
    height: 275px; 
    display: none; 
    } 

Answer 4

Come FYI per altre persone, ho avuto questo problema e non poteva capirlo - Firebug correttamente disattivata le immagini invisibili. Sto eseguendo il componente aggiuntivo AdBlock Plus e nascondevo le immagini perché si trovavano in una cartella chiamata annunci. Il giveaway era che le immagini hanno classi aggiunte con una stringa casuale, ad es. class = "auwhaezfynjjayjvlasn". Ho cambiato il nome della cartella degli annunci e voilà, visibile e non più disattivato in Firebug.

Answer 5

Un altro FYI - il mio FILE è stato chiamato xxx- annunci .swf e il file NON viene visualizzato in Firefox o Chrome, ma ha funzionato bene in Safari, IE e Opera.

Sto eseguendo Adblock plus in Firefox e Chrome.

Mi sembra che come pratica generica del software, Adblock stia cercando di essere troppo intelligente nel suo rilevamento. Mi è costato circa 2 giorni di debugging. Grrrr.

Grazie a Dio ho finalmente trovato questo forum.

Answer 6

Ho avuto lo stesso problema con le icone dei social network, ed è stato anche Ad-Blocker (sotto Firefox) a provocarlo. Il testo alternativo delle icone aveva alt = "Facebook" (Twitter, Instagram) in esso. Cambiarlo in alt = "Facebook_xxx" è stato sufficiente per risolvere il problema.