如何使用查询字符串（Query String）加载指定图片？

嘿，我来帮你搞定通过查询字符串加载指定图片的需求！结合你给出的画廊结构，咱们可以用JavaScript轻松实现这个功能，具体步骤和代码如下：

1. 补全你的HTML结构（基于你提供的片段） #

首先给缩略图加上data-image-id属性，方便和查询参数对应：

<div id="gallery">
  <div id="panel">
    <img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" />
  </div>
  <div id="thumbs">
    <img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" data-image-id="01" />
    <img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" data-image-id="02" />
    <img src="http://robgolbeck.com/demos/image-swap/image_03_thumb.jpg" alt="3rd image description" data-image-id="03" />
  </div>
</div>

2. 编写JavaScript解析查询字符串并切换图片 #

这段代码会自动读取URL里的查询参数（比如?image=02），然后加载对应图片：

// 解析URL查询参数的工具函数
function getQueryParam(paramName) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName);
}

// 初始化加载指定图片
function loadSpecifiedImage() {
  // 获取查询参数里的image值，比如?image=02就会得到"02"
  const targetImageId = getQueryParam('image');
  
  // 如果没有指定参数，保持默认图片
  if (!targetImageId) return;
  
  // 找到对应的缩略图元素
  const targetThumb = document.querySelector(`#thumbs img[data-image-id="${targetImageId}"]`);
  if (!targetThumb) {
    console.warn(`找不到编号为${targetImageId}的图片`);
    return;
  }
  
  // 替换大图的src地址
  const largeImage = document.getElementById('largeImage');
  largeImage.src = `http://robgolbeck.com/demos/image-swap/image_${targetImageId}_large.jpg`;
  
  // 移除所有缩略图的活跃状态（如果有）
  document.querySelectorAll('#thumbs img').forEach(img => {
    img.classList.remove('active');
  });
  
  // 给目标缩略图添加活跃标记
  targetThumb.classList.add('active');
}

// 页面加载完成后自动执行
window.addEventListener('DOMContentLoaded', loadSpecifiedImage);

3. 可选：添加活跃状态的CSS样式 #

给选中的缩略图加个视觉标记，让用户知道当前显示的是哪张图：

#thumbs img {
  opacity: 0.7;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 5px;
}

#thumbs img.active {
  border: 2px solid #ff4444;
  opacity: 1;
}

效果说明 #

当用户访问你的页面时，比如输入你的页面地址?image=02，页面会自动加载image_02_large.jpg，并且把第二张缩略图标记为活跃状态。如果查询参数不存在或者无效，就保持默认的第一张图片。

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