1

Estou fazendo um preview, e esta acontecendo assim, eu quero que não aparece nada como se nao tivesse imagem, e somente aparecesse a imagem do preview quando o usuário escolhesse a imagem.

Esta ficando assim antes de colocar a imagem, porém eu quero q nao tenha essa forma sem imagem:

inserir a descrição da imagem aqui

Código:

JavaScript

var loadFile = function(event) {
     var output = document.getElementById('output');
     output.src = URL.createObjectURL(event.target.files[0]);
}

Html que pega a imagem e mostra

<img id="output" style="width:100%;height:250px;padding:10px 10px 10px 10px;"/>
<br>
<br>
<input type="file" name="img" id="img" accept="image/jpg, image/jpeg, image/png" onchange="loadFile(event)"/>
<br/><br/>

2 Respostas 2

0

Você pode deixar a imagem sem opacidade, adicionando opacity: 0 ao style:

<img src="sem-imagem.jpg" id="output" style="opacity: 0; width:100%;height:250px;padding:10px 10px 10px 10px;"/>

Na função, altere a opacidade para 1:

var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.style.opacity = "1";
}

Ou pode usar visibility: hidden e alterar na função para visibility: visible:

Na função:

var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.style.visibility= "visible";
}
1
  • Obrigado! Ajudou muito! Commented 30/05/2018 às 18:35
0

Você pode deixar como padrão da imagem um caminho para uma imagem explicativa (algo como: "Selecione seu arquivo") ou até um gif 1x1 transparente.

Desta forma vai mostrar aquela imagem até que o usuário selecione a dele.

<img src="sem-imagem.jpg" id="output" style="width:100%;height:250px;padding:10px 10px 10px 10px;"/>
<br>
<br>
<input type="file" name="img" id="img" accept="image/jpg, image/jpeg, image/png" onchange="loadFile(event)"/>
<br/><br/>

Ou até mesmo ocultar a imagem até que algo tenha sido selecionado, mas acho a primeira opção mais interessante.

3
  • Tentei fazer isto, porém acontece que isto ai é em laravel Commented 30/05/2018 às 17:38
  • e então nao ta aceitando quando tento colocar uma img Commented 30/05/2018 às 17:38
  • E Se colocar no javascript? quando iniciar o documento mudar o SRC da imagem? Se não der certo acho que você terá que realmente ocultar a imagem, talvez com uma classe CSS e depois quando definir o SRC do output adicionar também ao output a classe que deixaria a imagem visivel ou apenas um display:block;. Entende o que quero dizer? Não sei se é possível no laravel fazer isso, tenho pouca experiência com ele. Commented 30/05/2018 às 17:42

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 .