JS动态修改图片的URL（src）的方法

下面是我的详细讲解“JS动态修改图片的URL（src）的方法”的完整攻略。

为什么需要动态修改图片的URL？

在前端开发中，经常会有需要在JavaScript代码中动态修改图片的URL的情况，常见的应用有：

• 资源懒加载：在网页加载时，只加载当前可见区域内的图片，等到用户滚动到下一个区域时再加载下一个区域内的图片，这时就需要动态修改图片的URL。
• 用户上传图片：用户上传图片后，需要在页面中展示出来，这时也需要动态修改图片的URL。
• 图片轮播：在轮播过程中需要切换图片的URL，也需要动态修改图片的URL。

如何动态修改图片的URL？

1. 通过修改img标签的src属性

可以通过JavaScript手动获取到img标签，并动态修改它的src属性来实现动态修改图片的URL。

// 获取图片元素
const img = document.querySelector('#image');

// 修改图片URL
img.src = 'new-image-url.jpg';

1. 通过创建img元素并设置src属性

也可以创建一个新的img元素，然后设置它的src属性，并将其添加到文档中，以实现动态修改图片的URL。

// 创建 img 元素
const img = document.createElement('img');

// 设置图片 URL
img.src = 'new-image-url.jpg';

// 向页面添加图片元素
document.body.appendChild(img);

示例

假设我们有一个图片列表，当用户点击某个列表项时，需要将其对应的图片显示在页面中。这时就可以用动态修改图片URL的方法来实现。

HTML结构

<ul id="image-list">
  <li data-image-url="image1.jpg">图片1</li>
  <li data-image-url="image2.jpg">图片2</li>
  <li data-image-url="image3.jpg">图片3</li>
</ul>
<div id="image-container">
  <img src="" id="image">
</div>

JavaScript代码

获取列表项，并添加点击事件监听器，当用户点击某个列表项时，获取其对应的图片URL，并将其设置为img标签的src属性。

// 获取图片列表和图片元素
const imageList = document.querySelector('#image-list');
const image = document.querySelector('#image');

// 添加点击事件监听器
imageList.addEventListener('click', (event) => {
  // 获取点击的列表项
  const target = event.target;

  // 获取列表项上的图片 URL
  const imageUrl = target.getAttribute('data-image-url');

  // 设置图片 URL
  image.src = imageUrl;
});

点击列表项后，对应的图片就会显示在img标签中。

另外一个示例是将页面中所有img标签的src属性都替换为新的URL。代码如下：

// 获取所有图片元素
const images = document.querySelectorAll('img');

// 遍历所有图片元素，将其 src 属性替换为新的 URL
images.forEach((img) => {
  img.src = 'new-image-url.jpg';
});

这样，页面中所有的图片都将显示为"new-image-url.jpg"这张图片。