img 标签在输入后获取 src 的值，但未显示图像

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>