使用javascript检查html img src是否为空

时间:2017-04-12 16:50:40

标签: javascript html

我正在尝试学习Javascript,这是一个我无法解决的问题..我有这个HTML标签

  <img id="img1" src="" class="img-thumbnail" style="display:none;" />
  <input id="addimg" type="button" value="Save URL" onclick='SaveUrl()'/>

并使用Javascript我想检查图像源是否为空这里是一个Javascript函数:

function SaveUrl() {
    var url = document.getElementById("ImageUrl").value;
    SaveImgUrl(url);
    ClearUrl();
}

function SaveImgUrl(url) {
        var img = document.getElementById("img1");
        if (img.src.length == 0) {
            img.src = url;
            img.style = "block";
        }

问题在于if语句我的意思是当源值是“”时它返回false我也尝试过(img.src ==“”)但是这也没有帮助。我也知道jQuery提供了更简单的解决方案但是我想用简单的Javascript解决它而不使用任何框架..请帮助:)

3 个答案:

答案 0 :(得分:5)

您必须使用getAttribute函数来获取src,如下所示:

&#13;
&#13;
<script>
function checkSRC()
{
  var elem = document.getElementById('img1');
  if(elem.getAttribute('src') == "")
  {
    alert("empty");
  }
  else
  {
    alert("HAS a value");
  }
}
</script>
<img id="img1" src="" class="img-thumbnail"/>
<button onClick="checkSRC();">CHECK SRC</button>
&#13;
&#13;
&#13;

如果它有价值:

&#13;
&#13;
<script>
function checkSRC()
{
  var elem = document.getElementById('img1');
  if(elem.getAttribute('src') == "")
  {
    alert("empty");
  }
  else
  {
    alert("HAS a value");
  }
}
</script>
<img id="img1" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" class="img-thumbnail"/>
<button onClick="checkSRC();">CHECK SRC</button>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

将您的if语句更改为此

function SaveImgUrl(url) {
    var img = document.getElementById("img1");
    if (!img.src || !img.src.length || img.src.length === 0) {
        img.src = url;
        img.style = "block";
    }

您没有检查src是否不存在,因此无法检查长度。

答案 2 :(得分:1)

您需要检查它是否有值,如果是,则该值是否仅包含白色字符

if ((!img.src) || (!img.src.trim()))