Unsplash API图片画廊弹窗图片src路径缺失，无法放大问题求助

问题根源 #

1. 选择器错误：你当前选中的是.image-box容器元素，而非容器内的<img>标签，导致无法获取点击图片的真实src路径。
2. 未传递图片src：updateImage函数中没有获取并传递点击图片的src值，所以放大图的src始终为空。

修复方案 #

修改POPUP部分的代码，调整选择器并正确传递图片src：

// POPUP CODE:

// 选择.image-box下的所有img元素，而非容器本身
const images = [...document.querySelectorAll('.image-box img')];

const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
const largeImage = document.querySelector('.large-image');


images.forEach((item) => {
    item.addEventListener('click', () => {
        // 直接传递当前点击图片的src
        updateImage(item.src);
        popup.classList.add('active');
    })
})

// 修改updateImage函数，接收图片src参数
const updateImage = (imgSrc) => {
    largeImage.src = imgSrc;
}

closeBtn.addEventListener('click', () => {
    popup.classList.remove('active');
})

额外优化建议 #

• 用classList.add/classList.remove替代toggle，避免重复点击时出现意外的显示/隐藏切换
• 可以给放大图添加loading="lazy"属性优化加载性能
• 若需要高清原图，可修改Unsplash图片链接的尺寸参数，比如将https://source.unsplash.com/weekly?${col}%20${rand}改为https://source.unsplash.com/1600x900/weekly?${col}%20${rand}，放大时显示更清晰的图片

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