设置时检查图片src是否有效

Question

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

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

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

我找到了各种错误处理方法，但不确定在这种情况下如何处理，因为如果页面正在动态更新，其中 none 似乎会触发。

谢谢！

Answer 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"
}

在下方附上动态更改图像的片段，如果找不到则加载默认图像

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>

设置时检查图片src是否有效

Check image src is valid when setting

html

javascript

image

src