图片放大加载失败、Modal弹窗关闭异常及最近浏览缩略栏实现求助

Hey Jasmine, let's break down your issues one by one and walk through how to fix them + build the recent view sidebar!

First, let's figure out why your big image isn't showing up when you click the thumbnail:

• Check for console errors: Open your browser's dev tools (F12) and look for 404 errors—this means the image path you're using is wrong. Maybe you're pointing to a non-existent file, or using a relative path that doesn't match the file structure.
• Verify the image source assignment: Make sure your JavaScript is correctly grabbing the full-size image URL and passing it to the modal's <img> tag. A common pattern is storing the full URL in a data-original attribute on the thumbnail, like this:

  <img class="gallery-thumb" src="small-image.jpg" data-original="large-image.jpg" alt="My image">
  

  Then in your JS, pull that value and assign it to the modal image:

  const modalImg = document.getElementById('modal-large-img');
  modalImg.src = clickedThumbnail.dataset.original; // Not just clickedThumbnail.src!
  

• Ensure the modal is visible: Double-check your CSS—if the modal has display: none but your JS isn't switching it to display: block on click, the image will load but you won't see it.

The "X" button not working usually boils down to event binding issues:

• Check selector accuracy: Make sure your JS is targeting the correct button. If your button has an ID like close-modal, confirm you're using document.getElementById('close-modal') (not a typo like closeBtn).
• Use event delegation if needed: If the modal/close button is dynamically added to the DOM (not present on page load), bind the click event to a parent element that exists from the start:

  document.addEventListener('click', function(e) {
    if (e.target.matches('#close-modal')) {
      document.getElementById('image-modal').style.display = 'none';
    }
  });
  

• Prevent event bubbling: If clicking the close button is triggering the modal's background click (if you have that functionality), add e.stopPropagation() inside the close handler to stop the event from bubbling up.

Here's a straightforward approach to track and display recently viewed images:

Step 1: Store viewed images in localStorage #

Every time a user clicks to open an image, save its thumbnail and full-size URL to localStorage (we'll add deduplication to avoid duplicates):

function saveToRecent(thumbSrc, largeSrc, altText) {
  // Get existing recent images or start with an empty array
  let recentImages = JSON.parse(localStorage.getItem('recentImages')) || [];
  
  // Skip if the image is already in the list
  const isDuplicate = recentImages.some(img => img.largeSrc === largeSrc);
  if (isDuplicate) return;

  // Limit to 5 recent images (adjust as needed)
  if (recentImages.length >= 5) {
    recentImages.shift(); // Remove the oldest entry
  }

  // Add the new image and save back to localStorage
  recentImages.push({ thumbSrc, largeSrc, altText });
  localStorage.setItem('recentImages', JSON.stringify(recentImages));
  
  // Update the sidebar immediately
  renderRecentSidebar();
}

Call this function inside your thumbnail click handler:

document.querySelectorAll('.gallery-thumb').forEach(thumb => {
  thumb.addEventListener('click', function() {
    // ... existing modal open logic ...
    saveToRecent(this.src, this.dataset.original, this.alt);
  });
});

Step 2: Render the sidebar on page load and updates #

Create a function to generate thumbnail elements for the sidebar:

function renderRecentSidebar() {
  const sidebar = document.getElementById('recent-sidebar');
  const recentImages = JSON.parse(localStorage.getItem('recentImages')) || [];
  
  // Clear existing content
  sidebar.innerHTML = '';

  recentImages.forEach(img => {
    const thumb = document.createElement('img');
    thumb.src = img.thumbSrc;
    thumb.alt = img.altText;
    thumb.classList.add('recent-thumb');
    
    // Add click handler to re-open the modal
    thumb.addEventListener('click', function() {
      const modal = document.getElementById('image-modal');
      const modalImg = document.getElementById('modal-large-img');
      modalImg.src = img.largeSrc;
      modal.style.display = 'block';
    });
    
    sidebar.appendChild(thumb);
  });
}

// Run on page load to show existing recent images
window.addEventListener('DOMContentLoaded', renderRecentSidebar);

Step 3: Add basic CSS for the sidebar #

Style the sidebar to make it look clean:

#recent-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background: #f5f5f5;
  padding: 1rem;
}

.recent-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin: 0.5rem 0;
  cursor: pointer;
  border: 2px solid transparent;
}

.recent-thumb:hover {
  border-color: #666;
}

Start with checking the console for errors first—9 times out of 10, that'll point you to the exact issue with the modal image or close button. For the recent sidebar, localStorage is perfect because it persists even after the user closes the tab.

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