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来切换图像。

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

4 个答案: