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

如何解决img 标签在输入后获取 src 的值，但没有显示图像

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

通过使用 src 的 previewimage.setAttribute("src",this.result); 值赋予 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>

我犯了什么错误？ 提前致谢。

解决方法

替换

previewimage.style,display = "block"

与

previewimage.style.display = "block"

,

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

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>