gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:27:01 26 4
gpt4 key购买 nike

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

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

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

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

谢谢!

最佳答案

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

关于javascript - 设置时检查图片src是否有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52889239/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com