如何从输入获取的图像属性中删除边框？

Question

我有一个问题，但我无法摆脱它，所以请帮助我。我有一个输入 IMG，并且有一个脚本可以显示所选图像。但是当输入为空时，图像属性显示黑色边框。无法摆脱黑色边框。这很令人沮丧。那么如果没有选择输入，我该如何删除边框或图像属性呢？帮我！

`<img id="uploadPreview" style="width: 100px; height: 100px;" />

<input id="imgInp" type="file" name="myPhoto" onchange="PreviewImage();" />

function PreviewImage() {

    var oFReader = new FileReader();

    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

    oFReader.onload = function (oFREvent) {

        document.getElementById("uploadPreview").src = oFREvent.target.result;

    };

};

Answer 1

每次附加图像源之前检查图像值是否为空。如果为空，则不执行任何其他操作，附加图像 atr 或 source 。当您在图像属性上添加任何内容时，它显示的边框意味着没有找到图像或未找到 img url。&nbsp; const loadFile = function(event) {&nbsp; &nbsp; const output = document.getElementById('output');&nbsp; &nbsp; output.src = URL.createObjectURL(event.target.files[0]);&nbsp; &nbsp; output.onload = function() {&nbsp; &nbsp; &nbsp; URL.revokeObjectURL(output.src) // free memory&nbsp; &nbsp; }&nbsp; };<input type="file" accept="image/*" onchange="loadFile(event)"><img id="output"/>

Answer 2

首先添加隐藏图像的样式#uploadPreview{display:none;}function PreviewImage() {&nbsp; &nbsp; var oFReader = new FileReader();&nbsp; &nbsp; oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);if(oFReader == "" || oFReader== null){&nbsp; alert("image is empty")}else{&nbsp; &nbsp; oFReader.onload = function (oFREvent) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("uploadPreview").src = oFREvent.target.result;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("uploadPreview").style = "display:block";}&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; };

Answer 3

也许可以用类似的东西来设计图像线条：border-width:0px; border:none;这应该消除任何类型的边界。或者添加一个display:none完全隐藏图像。