网页相册点击显示更多图片后logo变动、图片不加载如何修复

架构老林

2026-10-1

问题根源

logo被篡改原因：你在previewFive函数里用document.getElementsByTagName("img")[0]获取相册第一张图，但这个API会选中页面所有img标签的第一个，也就是你的页面logo，直接修改它的src自然会把logo改掉。
新增图片加载失败+显示异常：populateFigures函数的5图模式分支有两个低级错误：
- 图片路径拼写错误：把images/写成了image/，少了末尾的s导致资源请求404
- 索引写死：循环里每次都取getElementsByClassName("about")[1]，相当于5次循环都在修改同一张图，根本没给另外4张图赋值src

修复步骤

1. 修改previewFive函数，只选中相册内的img

把原来直接取全局img的两行，改成只选class为about的相册专属图片：

// 替换原有错误代码
// document.getElementsByTagName("img")[0].src = "images/about_0" + photoOrder[0] + "sm.jpg";
// document.getElementsByTagName("img")[4].src = "images/about_0" + photoOrder[4] + "sm.jpg";

// 修改后代码
const albumImgs = document.getElementsByClassName("about");
albumImgs[0].src = "images/about_0" + photoOrder[0] + "sm.jpg";
albumImgs[4].src = "images/about_0" + photoOrder[4] + "sm.jpg";

同时要修改createEventListeners里获取主图的代码，避免误选到logo：

// 替换原有错误代码
// var mainFig = document.getElementsByTagName("img")[1];
// 修改后代码
var mainFig = document.getElementsByClassName("about")[1];

2. 修复populateFigures函数的5图分支逻辑

} else {
    for (var i = 0; i < 5; i++) {
        // 修复路径拼写错误
        filename = "images/about_0" + photoOrder[i] + "sm.jpg";
        // 修复索引写死问题，用循环变量i取对应位置的图片
        currentFig = document.getElementsByClassName("about")[i];
        currentFig.src = filename;
    }
}