HTML - DOM src 属性

HTML DOM 的src 属性用于获取（检索）或设置（更新）HTML 中图像（<img>）元素的源。

它返回图像当前的源 URL，修改后，它会更新图像的“src”属性，允许您动态更改源文件、路径或链接目标。

语法

以下是 HTML DOM 的src（获取 src 属性）属性的语法：

imageObject.src

要更新（设置）src 属性，请使用以下语法：

imageObject.src = new_source

参数

因为它是一个属性，所以它不接受任何参数。

返回值

此属性将图像元素的当前源作为字符串返回。

示例 1：检索“img”元素的当前源

以下是 HTML DOM src 属性的基本示例。

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM src</title>
</head>
<body>
<p>The source of an image is displaed below: </p>
<p>My Image: </p>
<img src ="https://tutorialspoint.com/images/logo.png" id="my_img">
<p id="result"></p>
<script>
   let my_img = document.getElementById("my_img");
   document.getElementById('result').innerHTML = "The source of the above image is: " + my_img.src;
</script>
</body>
</html>

示例 2：更新“img”元素的当前源

这是另一个使用 HTML DOM src 属性的示例。我们使用此属性来更新（更改）图像的源：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM src</title>
<style>
   img{
      width: 300px;
      height: 200px;
      border: 2px solid green;
      border-radius: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to update the source of an image:</p>
<p>My Image: </p>
<img src ="https://tutorialspoint.com/images/logo.png" id="my_img"><br><br>
<button id="change_btn">Update</button>
<p id="result"></p>
<script>
   document.getElementById('change_btn').addEventListener("click", ()=>{
      let my_img = document.getElementById("my_img");
      my_img.src = "https://tutorialspoint.com/static/images/hero.png";
      document.getElementById('result').innerHTML = "The source of an image has been updated...";
   });
</script>
</body>
</html>

支持的浏览器

属性
值	是	是	是	是	是

打印页面