HTML/CSS图片加载错误求助：作品集Google Drive链接异常

Hey there, let's break down what's happening here and fix that error:

What's Causing the Error #

Your portfolio-box component is built as an image lightbox/viewer by default. It expects the href attribute on the <a> tag to point directly to an image file. Since you're linking to Google Drive folders instead, the component tries to load that folder URL as an image—naturally, that fails and throws the "could not be loaded" message.

Quick Solutions to Fix This #

1. Bypass the Lightbox & Directly Open Drive Folders (Easiest Fix)

Modify each portfolio-box link to open the Drive folder in a new tab, and prevent the lightbox from triggering. Add these attributes to every <a> tag:

<a class="portfolio-box" href="https://drive.google.com/drive/folders/1iIMsUtdX1lVSAiQNdXvnZq9RAnp4hiog?usp=sharing" 
   target="_blank" rel="noopener noreferrer" 
   data-toggle="none">
  <!-- rest of your image and caption code -->
</a>

• target="_blank" opens the Drive folder in a new tab
• rel="noopener noreferrer" is a security best practice for external links
• data-toggle="none" tells the lightbox component not to run its default image-loading logic

2. Fix the Syntax Error in Your Code

First, spot the missing closing tag in your fifth portfolio item—this can cause unexpected DOM behavior:

<!-- Before (broken): -->
<div class="portfolio-box-caption">
  <div class="project-category text-white-50"> Category </div>
  <div class="project-name"> Project Name </div>
</div <!-- Missing closing > -->

<!-- After (fixed): -->
<div class="portfolio-box-caption">
  <div class="project-category text-white-50"> Category </div>
  <div class="project-name"> Project Name </div>
</div> <!-- Now properly closed -->

3. Keep Lightbox Functionality (If You Want Preview Images)

If you want the lightbox to show a preview image before linking to the Drive folder:

1. Upload a preview image to Google Drive, set its sharing to "Anyone with the link can view"
2. Convert the Drive image link to a direct-access URL:
   • Original share link: https://drive.google.com/file/d/[FILE_ID]/view?usp=sharing
   • Direct access URL: https://drive.google.com/uc?export=view&id=[FILE_ID]
3. Use this direct URL as the href for the lightbox, then add a link inside the caption to your Drive folder:

<div class="portfolio-box-caption">
  <div class="project-category text-white-50">Cardiovascular Disease Analysis</div>
  <div class="project-name">
    Analysis of Cardiovascular Disease Dataset Using Python
    <br>
    <a href="https://drive.google.com/drive/folders/1iIMsUtdX1lVSAiQNdXvnZq9RAnp4hiog?usp=sharing" target="_blank" class="text-white">View on Google Drive</a>
  </div>
</div>

4. Customize the Lightbox JavaScript (Advanced)

If you have access to the component's JS code, add logic to detect Drive links and skip the lightbox:

$('.portfolio-box').on('click', function(e) {
  const linkHref = $(this).attr('href');
  // Check if the link points to Google Drive
  if (linkHref.includes('drive.google.com')) {
    e.preventDefault(); // Stop lightbox from running
    window.open(linkHref, '_blank'); // Open Drive folder in new tab
    return;
  }
  // Leave original lightbox logic intact for image links
});

Final Recommendation #

Start with Solution 1 + Solution 2—they're quick fixes that will eliminate the error and let users access your Drive folders directly, which is exactly what you want.

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