Fiz um botão de upload que exibe uma pré-visualização da imagem selecionada, mas para isto, a tag img
tem seu atributo src
vazio. Portanto, aparece este ícone que está apontado com a seta.
Já tentei de tudo, coloquei os atributos title
, alt
e mesmo assim continua exibindo! Então tive a ideia de utilizar javascript mas também não tive êxito!
Os atributos alt
e title
estavam preenchidos, então cheguei a conclusão de que não é por eles estarem vazios..
<div class="image">
<img src="" alt="" title="" />
</div>
Já com o JavaScript, seleciono a tag img
e verifico se o atributo src
está "nulo", se sim, define o estilo display
como "none", mas ainda não funcionou!
const img = document.querySelector("img").src;
if (src == null) {
img.style.display = "none";
}
Aqui está toda estrutura dentro do body
da página
<div class="container">
<div class="wrapper">
<div class="image">
<img src="" alt="" title="">
</div>
<div class="content">
<div class="icon">
<i class="fas fa-cloud-upload-alt"></i>
</div>
<div class="text">
Nenhuma Imagem Selecionada
</div>
</div>
<div id="cancel-btn">
<i class="fas fa-times"></i>
</div>
<div class="file-name">
File name here
</div>
</div>
<button onclick="defaultBtnActive()" id="custom-btn">Selecione uma Imagem</button>
<input id="default-btn" type="file" hidden>
</div>
Como faço para ocultar aquele ícone quando não houver nenhuma imagem?
onerror
do html, da seguinte forma:<img src="" alt="" title="" onerror="this.style.display = 'none'" />
que irá resolver este detalhe!img
não temsrc
e o eventoonerror
é invocado. Quando isso acontece, o estilodisplay
da tag recebe o valornone
. Quando você altera a imagem para ela receber o arquivo que o usuário fez o upload, você aparentemente se esquece de alterar odisplay: none
paradisplay: block
ou outro valor que a torne visível. Teste declarar a tag assim ` <img src="" alt="" onerror='this.style.display = "none"' onload='this.style.display = "block"'/> `.