javascript修改图片路径

原创

mob649e8160f07c 2023-08-04 13:54:33 ©著作权

文章标签 javascript 动态生成绝对路径 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8160f07c的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript修改图片路径

导语

在前端开发中，经常会遇到需要修改图片路径的情况。这可能是因为需要动态加载图片、响应用户的操作或根据不同的环境加载不同的图片等。本文将介绍如何使用 JavaScript 修改图片路径，并提供一些实例代码供参考。

什么是图片路径

在网页中，图片通常是通过 <img> 标签来插入的。<img> 标签的 src 属性指定了图片的路径。图片路径可以是相对路径或绝对路径。

相对路径：相对于当前 HTML 文件的路径，可以是相对于当前文件的文件夹路径或相对于网站根目录的路径。
绝对路径：完整的 URL 地址，包括协议、域名、路径等信息。

修改图片路径的方法

方法一：直接修改 `src` 属性

在 JavaScript 中，可以通过修改 <img> 标签的 src 属性来改变图片的路径。

const img = document.getElementById('myImage');
img.src = 'new/path/to/image.jpg';

上述代码中，我们通过 document.getElementById() 方法获取了 id 为 myImage 的 <img> 标签，并将其 src 属性修改为新的图片路径。

方法二：使用 `setAttribute()` 方法

另一种修改图片路径的方法是使用 setAttribute() 方法来设置 src 属性。

const img = document.getElementById('myImage');
img.setAttribute('src', 'new/path/to/image.jpg');

这种方法与直接修改 src 属性的效果是一样的，只是使用了不同的方法。

方法三：动态生成 `<img>` 标签

除了直接修改已有的 <img> 标签，还可以通过动态生成 <img> 标签来插入图片。

const img = document.createElement('img');
img.src = 'new/path/to/image.jpg';
document.body.appendChild(img);

上述代码中，我们使用 createElement() 方法创建了一个 <img> 标签，并将其 src 属性设置为新的图片路径。然后，通过 appendChild() 方法将该 <img> 标签插入到 <body> 元素中。

示例代码

下面是一个完整的示例代码，演示了如何使用 JavaScript 修改图片路径。

<!DOCTYPE html>
<html>
<head>
  <title>修改图片路径示例</title>
</head>
<body>
  <img id="myImage" src="old/path/to/image.jpg" alt="My Image">
  <button onclick="changeImagePath()">修改图片路径</button>

  <script>
    function changeImagePath() {
      const img = document.getElementById('myImage');
      img.src = 'new/path/to/image.jpg';
    }
  </script>
</body>
</html>

上述代码中，我们首先在 <body> 元素中插入了一个 <img> 标签，其 src 属性设置为初始的图片路径。然后，我们插入了一个按钮，并为其绑定了一个点击事件 changeImagePath()。在事件处理函数中，我们获取了 id 为 myImage 的 <img> 标签，并将其 src 属性修改为新的图片路径。

点击按钮后，图片的路径将被修改为新的路径。