img tag is getting value of src after input but image is not getting displayed

Question

img tag is getting value of src after giving image as an input but still image is not getting displayed.

By using previewimage.setAttribute("src", this.result); value of src is given to the img tag.

 const inpfile = document.getElementById("inpfile"); const previewcontainer = document.getElementById("imagepreview"); const previewimage = previewcontainer.querySelector(".image-preview__image"); const previewdefaulttext = previewcontainer.querySelector(".image-preview__default-text"); inpfile.addEventListener("change", function () { const file = this.files[0]; if (file) { const reader = new FileReader(); previewdefaulttext.style, display = "none"; previewimage.style, display = "block"; reader.addEventListener("load", function () { previewimage.setAttribute("src", this.result); }); reader.readAsDataURL(file); } else { previewdefaulttext.style, display = null; previewimage.style, display = null; previewimage.setAttribute("src", ""); } });

 image-preview { width: 300px; min-height: 100px; border: 2px solid #dddddd; margin-top: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #cccccc; }.image-preview__image { display: none; width: 100%; }

 <input type="file" name="inpfile" id="inpfile"> <div class="image-preview" id="imagepreview"> <img src="" alt="image preview" class="image-preview__image"> <span class="image-preview__default-text">image preview</span> </div>

What mistake I did? Thank You So Much in advance.

Answer 1

Replace

previewimage.style, display = "block"

with

previewimage.style.display = "block"

Answer 2

Try this you just have to replace the "," with "." in

previewimage.style.display

 const inpfile = document.getElementById("inpfile"); const previewcontainer = document.getElementById("imagepreview"); const previewimage = previewcontainer.querySelector(".image-preview__image"); const previewdefaulttext = previewcontainer.querySelector(".image-preview__default-text"); inpfile.addEventListener("change", function () { const file = this.files[0]; if (file) { const reader = new FileReader(); previewdefaulttext.style.display = "none"; previewimage.style.display = "block"; reader.addEventListener("load", function () { previewimage.setAttribute("src", this.result); }); reader.readAsDataURL(file); } else { previewdefaulttext.style, display = null; previewimage.style.display = null; previewimage.setAttribute("src", ""); } });

 image-preview { width: 300px; min-height: 100px; border: 2px solid #dddddd; margin-top: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #cccccc; }.image-preview__image { display: none; width: 100%; }

 <input type="file" name="inpfile" id="inpfile"> <div class="image-preview" id="imagepreview"> <img src="" alt="image preview" class="image-preview__image"> <span class="image-preview__default-text">image preview</span> </div>