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

Question

img 标签在将图像作为输入后获取src的值，但未显示静止图像。

通过使用previewimage.setAttribute("src", this.result); src 的值被赋予 img 标签。

 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>

我犯了什么错误？ 非常感谢你提前。

Answer 1

代替

previewimage.style, display = "block"

和

previewimage.style.display = "block"

Answer 2

试试这个，你只需要将“，”替换为“。” 在

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>