时间戳

首页 > 解决方案 > 设置时检查图像src是否有效

javascript - 设置时检查图像src是否有效

问题描述

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

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

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

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

谢谢！

标签： javascripthtmlimagesrc

解决方案

修改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>

推荐阅读