设置时检查图像src是否有效答案

【问题标题】：Check image src is valid when setting设置时检查图像src是否有效
【发布时间】：2018-10-19 17:38:57
【问题描述】：

我有一小段 noddy 代码，当单击图像时，用户可以更改源。这是我使用的功能

function doStuff(objId){
        newVal = prompt("new Value")
        if(newVal==""){
            newVal = "blank"
        }
    document.getElementById(objId).src=newVal+".png"
}

有没有办法在设置 src 之前检查它是否是一个有效的文件名，同时我检查用户是否没有指定任何东西？我希望能够保护页面，因此如果用户键入“banana”并且没有可用的banana.png，我只需将其更改为空白.png 文件。

我找到了各种方法来解决错误，但不确定如何在这种情况下执行此操作，因为如果页面正在动态更新，这些方法似乎都不会触发。

谢谢！

【问题讨论】：

在设置src属性之前发送一个AJAX HEAD请求来检查图像是否存在。

标签： javascript html image src

【解决方案1】：

修改img标签以在出错时显示默认图像

<img onerror="this.src='images/default.jpg'"/>

现在你可以执行你的函数来动态改变图像

function doStuff(objId){
        newVal = prompt("new Value")
        if(newVal==""){
            newVal = "blank"
        }
    document.getElementById(objId).src=newVal+".png"
}

在下面附加了一个sn-p，它会动态更改图像，如果找不到则加载默认图像

var server = 'https://homepages.cae.wisc.edu/~ece533/images/';

function changeImage(option) {
  
  document.getElementById('test').src = server + option.value;
}

<html>

<body>

  <img width='150' height='150' id='test' src="http://www.yostra.com/images/team/you.png" onerror="this.src='http://www.yostra.com/images/team/you.png'" />
  <br>
  <select onchange='changeImage(this)'>
  <option>--Choose--</option>
    <option value='airplane.png'>airplane.png</option>
    <option value='baboon.png'>baboon.png</option>
    <option value='abs'>ABC</option>
    <option value='arctichare.png'>arctichare.png</option>
    <option value=''>----</option>
  </select>

</body>

</html>

【讨论】：

您好，编辑您的问题以从属性中删除javascript:。不确定这是否在那个地方有效，我只从<a href="javascript:foo()"> 的情况下知道它，但即使它有效，它在这里也没有实际用途。除此之外，很好的答案，+1
这似乎对我不起作用，我已将其放入我的源代码但是当我点击它并输入一个值“banana”（并且没有banana.png）我仍然得到一个损坏的链接：/
查看开发者控制台我可以看到一条错误消息“net::ERR_FILE_NOT_FOUND”
忽略我以前的 cmets 我是个彻头彻尾的白痴，这就像一个魅力！干杯！