切换缩略图后还原主图出现模糊问题的解决方法

问题根源 #

你的代码里，点击缩略图时直接把缩略图的低分辨率图片路径赋值给了主图。原主图是高清的image-product-1.jpg，但切换回它时，你没有调用对应的高清图地址，反而用了低清的缩略图路径，导致低分辨率图片被放大后出现模糊。

解决方案 #

核心思路是给每个缩略图绑定对应的高清图地址，点击时加载高清图而非缩略图本身。具体实现如下：

修改后的代码示例 #

HTML

<div>
  <img src="./images/image-product-1.jpg" class="w-100 main-img" alt="产品主图">
</div>

<div class="d-flex mt-4 justify-content-center">
  <!-- 给每个缩略图添加data-src属性，存储对应高清图路径 -->
  <img src="./images/image-product-1-thumbnail.jpg" class="thumbnail t-0" data-src="./images/image-product-1.jpg" alt="原主图缩略图">
  <img src="./images/image-product-2-thumbnail.jpg" class="thumbnail t-1" data-src="./images/image-product-2.jpg" alt="产品缩略图2">
  <img src="./images/image-product-3-thumbnail.jpg" class="thumbnail t-2" data-src="./images/image-product-3.jpg" alt="产品缩略图3">
</div>

JavaScript

const thumbnails = document.querySelectorAll(".thumbnail");
const mainImg = document.querySelector(".main-img");

thumbnails.forEach(thumbnail => {
  thumbnail.addEventListener('click', function() {
    // 读取当前缩略图的data-src，直接赋值给主图
    mainImg.src = this.dataset.src;
  });
});

关键说明 #

• 新增了原主图对应的缩略图t-0，让用户可以直接切换回初始高清图；
• 所有切换操作都加载高清图，彻底避免低分辨率图片被拉伸放大导致的模糊；
• 代码逻辑更简洁，新增缩略图时只需添加对应的data-src即可，无需修改JS判断逻辑。

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