使用JavaScript replace()方法替换img元素src=#属性无效及无法获取点击图片dataset.src问题

我来帮你解决这两个前端问题，先看修复后的完整代码，再一步步拆解问题根源：

修复后的完整JavaScript代码 #

/* 获取DOM元素 */
const photoGal = document.getElementById('photo');
const galPhotos = document.querySelectorAll('.Gallery__Photo');
const galModal = document.querySelector('.gallery-modal');
const galModalImg = document.querySelector('.modal-image');

/* 点击事件处理函数 */
const addModalClass = (e) => {
  // 获取当前被点击的图片元素
  const clickedPhoto = e.target;
  
  // 优先使用data-src，没有则用默认src做备选
  const targetSrc = clickedPhoto.dataset.src || clickedPhoto.src;
  
  // 直接修改模态框图片的src属性（这才是真正修改DOM的方式）
  galModalImg.src = targetSrc;
  
  // 如果模态框默认隐藏，这里可以添加显示逻辑，比如：
  // galModal.style.display = 'block';
  
  console.log('模态框图片已更新为:', targetSrc);
};

// 给每个相册图片绑定点击事件
galPhotos.forEach(galImg => {
  galImg.addEventListener('click', addModalClass);
});

问题1：replace()无法修改图片src的原因 #

你之前的写法完全搞错了操作DOM的逻辑：

• galModalImg.toString()返回的是元素的字符串描述（比如[object HTMLImageElement]），不是DOM元素的属性源码，修改这个字符串对页面上的实际图片没有任何影响。
• 要修改图片的src，正确的方式是直接操作DOM元素的src属性（galModalImg.src = 新地址），或者用setAttribute('src', 新地址)，这两种方式会直接更新页面上的图片。

问题2：无法获取当前点击图片dataset的原因 #

你的点击事件函数里做了遍历所有相册图片的循环，这会导致data变量最后变成最后一张图片的dataset，而不是你点击的那一张：

• 解决核心是利用事件对象e的target属性，它会精准指向当前被点击的元素，直接从这里获取dataset.src就能拿到对应图片的地址。
• 注意你的第二、第三张图片没有添加data-src属性，所以加了|| clickedPhoto.src的判断，避免报错，默认使用图片的默认src作为备选。

额外优化提示 #

1. 你之前的函数名addModalCalss是拼写错误，应该是addModalClass，已经在修复代码里修正。
2. 如果模态框默认是隐藏状态，记得在点击事件里添加显示逻辑（比如galModal.style.display = 'block'），也可以给模态框背景添加关闭事件，提升用户体验。

内容的提问来源于stack exchange，提问作者shivetay