如何使用函数动态设置img src

Question

我想用 javascript 中的一个函数设置img src=" "，该函数根据变量更改图片并检查值：

javascript文件代码：

 function myFunctionstatus(){
 var ledactual=document.getElementById("ledonof").value     
 var image = document.getElementById('ledPic'); 
 if (ledactual==ledon) {
     image.src = "https://cdncontribute.geeksforgeeks.org/wp-c 
  content/uploads/OFFbulb.jpg"; 
    }
 if (ledactual==ledoff){
     image.src = "https://cdncontribute.geeksforgeeks.org/wp- 
   content/uploads/ONbulb.jpg";
 }                    
   } };

html文件中的img src：

 <img id="ledPic" [src]="myFunctionstatus()" > 

但它对我不起作用并且图片没有出现！脚本正在运行，我用一个按钮进行了测试：

 <input type="button" id="ledonof"  onclick="myFunction();myFunctionstatus();" class="ledonoff" value="<?phpinclude ('ledstatus.php'); ?>">

如何使用函数设置 img src？

Answer 1

我无法评论您用于获取状态的 php，但以下是一个有效的 javascript 示例：

function myFunctionstatus(){
   var input = document.getElementById("ledonof");
   var image = document.getElementById('ledPic'); 
   if (input.value == "on") {
     image.src = "https://cdncontribute.geeksforgeeks.org/wp-content/uploads/ONbulb.jpg";
     input.value = "off"
   } else if (input.value == "off"){
     image.src = "https://cdncontribute.geeksforgeeks.org/wp-content/uploads/OFFbulb.jpg"; 
     input.value = "on"
   }                    
 }
 
 myFunctionstatus()

<img id="ledPic" /> 
 <input type="button" id="ledonof"  onclick="myFunctionstatus();" class="ledonoff" value="on">

正如其他人所指出的， src 不支持函数调用（您甚至不会从函数调用中返回任何内容），因此您需要在开始时运行该函数一次以将图像设置为初始状态。

Answer 2

你需要手动设置一个初始状态

function switchStatus() {
  let switchButton = document.getElementById('ledonof');
  let img = document.getElementById('ledPic');
  if(switchButton.value == "ledon") {
    img.src = "https://cdncontribute.geeksforgeeks.org/wp-content/uploads/OFFbulb.jpg";
    switchButton.value = "ledoff";
  } else {
    img.src = "https://cdncontribute.geeksforgeeks.org/wp-content/uploads/ONbulb.jpg";
    switchButton.value = "ledon";
  }
}

<img id="ledPic" src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/OFFbulb.jpg" > <input type="button" id="ledonof"  onclick="switchStatus();" value="ledoff">

Answer 3

img src attr 不支持函数调用。无论您在 src 中传递什么，都将被视为 url（相对或其他）。 请参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes

因此，您需要做的是在/加载元素之前调用该函数，然后更改 src。最简单的形式如下

`<script>
(function() {
   // your page initialization code here
   // the DOM will be available here
   // call the function here
})();
</script>`

Answer 4

你不能这样做。在解释 HTML 时，不能将图像元素的 src 属性解释为 javascript。

一开始需要设置src，点击按钮时，可以通过改变图片src来切换图片。