0

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 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?

7
  • 1
    Seu pergunta esta bem estruturada mais não coloca código fonte em formato de imagem, isso dificulta para quem vai tentar responder. Veja como formata código de fonte em sua perguta aqui pt.stackoverflow.com/editing-help.
    – Hozeis
    18/08/2021 às 21:12
  • 1
    sorry, irei refazer a pergunta
    – lucas
    18/08/2021 às 21:17
  • Utilize o atributo/evento onerror do html, da seguinte forma: <img src="" alt="" title="" onerror="this.style.display = 'none'" /> que irá resolver este detalhe! 18/08/2021 às 21:20
  • ja tentei mas quando eu seleciono a imagem ela não aparece visualmente
    – lucas
    18/08/2021 às 21:24
  • 1
    Ela não aparece porque quando o site é carregado, a tag img não tem src e o evento onerror é invocado. Quando isso acontece, o estilo display da tag recebe o valor none. Quando você altera a imagem para ela receber o arquivo que o usuário fez o upload, você aparentemente se esquece de alterar o display: none para display: 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"'/> `. 18/08/2021 às 22:01

1 Resposta 1

-2

O seletor que você usou no javascript estava incorreto.

O seletor está retornando o src da tag img e atribuindo na constante img, porem quando a tag não possui um src definido ela devolve a url dá página atual, ou seja, não possuirá um valor nulo, logo não entrará no if definido na sequencia. Um segundo erro que pude observar foi a tentativa de utilizar a variável src sem tela definido anteriormente, gerando em mais um erro para o código descrito. O ultimo erro que achei está na utilização da constante img para definir um estilo caso o if que ela pertence seja verdadeiro, porem a constante não possui uma tag html e sim um valor em formato string recebido na sua inicialização. No código abaixo mostro as alterações necessárias para o código rodar.

Segue o código corrigido logo abaixo:

const img = document.querySelector("img"); //seleciono a tag img do html

if (img.src == null) {  //verifico se o atributo possui algum valor
    img.style.display = "none"; //modifico o estilo da tag img que não possui valor no atributo src
}
1
  • 1
    Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    28/12/2022 às 16:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .