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

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。

  const loadFile = function(event) {

    const output = document.getElementById('output');

    output.src = URL.createObjectURL(event.target.files[0]);

    output.onload = function() {

      URL.revokeObjectURL(output.src) // free memory

    }

  };

<input type="file" accept="image/*" onchange="loadFile(event)">

<img id="output"/>

Answer 2

首先添加隐藏图像的样式

#uploadPreview{

display:none;

}

function PreviewImage() {

    var oFReader = new FileReader();

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

if(oFReader == "" || oFReader== null){

  alert("image is empty")

}else{

    oFReader.onload = function (oFREvent) {

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

        document.getElementById("uploadPreview").style = "display:block";

}

        };

    };

Answer 3

也许可以用类似的东西来设计图像线条：

border-width:0px;
border:none;

这应该消除任何类型的边界。

或者添加一个

display:none

完全隐藏图像。