Question

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

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

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

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

谢谢！

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>

设置

1 个答案: