Image preview

Question

I’m making a preview, and it’s happening like this, I want it to not appear as if it had no image, and only appear the preview image when the user chooses the image.

It’s getting like this before I put the image, but I want it not to have this shape without image:

Code:

Javascript

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

HTML that takes the image and shows

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

Answer 1

You can leave as the default image a path to an explanatory image (something like: "Select your file") or even a clear 1x1 gif.

This way will show that image until the user selects from it.

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

Or even hide the image until something has been selected, but I find the first option more interesting.

Answer 2

You can leave the image without opacity by adding opacity: 0 style:

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

In the function, change the opacity to 1:

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

Or you can use visibility: hidden and change the function to visibility: visible:

In function:

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