Flickr图片URL有效性校验：如何过滤无效图片链接？

Hey, I’ve run into this exact issue with Flickr’s API before—let’s break down why some images are failing to load and how to fix it.

Why This Happens #

The most common reasons for the "File not found" error are:

• Photo Permissions/Deletion: The photo might be private, deleted by the owner, or restricted from hotlinking (direct external access). Even if the API returns metadata, the actual image resource no longer exists or is inaccessible.
• Missing Size Variants: Sometimes the default size (the one your current code generates) isn’t available for a photo, but smaller size variants still exist.
• Incorrect URL Format: Your current code uses the basic secret, but some photos require the original secret/format to access the full-size image (which might be the only available version).

Step-by-Step Solutions #

1. Add Extra Metadata to Get Original Image Details #

First, update your API request to fetch the original image’s secret and format. This gives you a more reliable URL option. Modify the params in your getPhotos function to include:

extras: 'original_format'

This tells the Flickr API to return originalsecret and originalformat fields for each photo, which we’ll use to generate a more robust URL.

2. Modify URL Generation to Support Fallbacks #

Instead of returning a single URL, generate multiple possible URLs (original format first, then different size variants). This lets you fall back to working versions if the default URL fails.

Update your createPhotoUrl function:

let createPhotoUrl = (farm, server, photoId, secret, originalSecret, originalFormat) => {
  const urls = [];
  // Add original format URL if available
  if (originalSecret && originalFormat) {
    urls.push(`https://farm${farm}.staticflickr.com/${server}/${photoId}_${originalSecret}_o.${originalFormat}`);
  }
  // Add default and smaller size variants
  urls.push(
    `https://farm${farm}.staticflickr.com/${server}/${photoId}_${secret}.jpg`,
    `https://farm${farm}.staticflickr.com/${server}/${photoId}_${secret}_m.jpg`, // Medium size
    `https://farm${farm}.staticflickr.com/${server}/${photoId}_${secret}_s.jpg`  // Small size
  );
  return urls;
};

3. Handle Image Load Failures with Fallbacks #

In your createPhotoPage function, add logic to try the next URL if an image fails to load. This ensures you get a working image whenever possible:

function createPhotoPage(photos) {
  photos.forEach(photo => {
    const img = document.createElement('img');
    let urlIndex = 0;

    const loadNextUrl = () => {
      if (urlIndex >= photo.photoUrls.length) {
        // All URLs failed—use a placeholder
        img.src = 'https://via.placeholder.com/300x200?text=Image+Unavailable';
        img.alt = 'Unavailable image: ' + photo.title;
        return;
      }
      img.src = photo.photoUrls[urlIndex];
      urlIndex++;
    };

    // Try next URL on load failure
    img.onerror = loadNextUrl;
    // Start with first URL
    loadNextUrl();

    // Add image to your page (adjust this to match your existing DOM structure)
    const photoContainer = document.createElement('div');
    photoContainer.appendChild(img);
    document.getElementById('photo-grid').appendChild(photoContainer);
  });
}

4. Verify Photo Accessibility (Optional) #

If you want to pre-check if a photo is accessible before rendering, you can send a HEAD request to the URL. Note that this adds extra network calls, so use it sparingly:

async function isUrlValid(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    return response.ok;
  } catch {
    return false;
  }
}

You can use this in your getPhotos function to filter out invalid URLs upfront, but the onerror fallback is usually more efficient.

Full Modified Code #

Here’s how all the pieces fit together:

let createPhotoUrl = (farm, server, photoId, secret, originalSecret, originalFormat) => {
  const urls = [];
  if (originalSecret && originalFormat) {
    urls.push(`https://farm${farm}.staticflickr.com/${server}/${photoId}_${originalSecret}_o.${originalFormat}`);
  }
  urls.push(
    `https://farm${farm}.staticflickr.com/${server}/${photoId}_${secret}.jpg`,
    `https://farm${farm}.staticflickr.com/${server}/${photoId}_${secret}_m.jpg`,
    `https://farm${farm}.staticflickr.com/${server}/${photoId}_${secret}_s.jpg`
  );
  return urls;
};

const baseUrl = 'https://api.flickr.com/services/rest/?method=flickr.photos.search'; 
const APIkey = '49a691ac8b00bf41abdb43c3104e0cd7'; 
let state = []; // Assuming this is your global state variable

const getPhotos = async type => { 
  try {
    let response = await axios.get(baseUrl, { 
      params: { 
        api_key: APIkey, 
        text: type, 
        format: 'json', 
        nojsoncallback: 1,
        extras: 'original_format' // Fetch original image details
      }, 
    }); 
    let data = response.data; 
    if (data?.photos?.photo) { 
      let newState = data.photos.photo.map(item => { 
        return { 
          owner: item.owner, 
          secret: item.secret, 
          server: item.server, 
          farm: item.farm, 
          photoId: item.id, 
          title: item.title, 
          photoUrls: createPhotoUrl(item.farm, item.server, item.id, item.secret, item.originalsecret, item.originalformat),
          like: false, 
          type: type, 
        }; 
      }); 
      state = [...newState]; 
      console.log('state', state); 
      createPhotoPage(state); 
    } else { 
      console.log('No photos found for this query!'); 
    }
  } catch (error) {
    console.log('An error occurred fetching photos:', error);
  }
}; 

function createPhotoPage(photos) {
  // Clear existing photos if needed
  const photoGrid = document.getElementById('photo-grid');
  photoGrid.innerHTML = '';

  photos.forEach(photo => {
    const img = document.createElement('img');
    let urlIndex = 0;

    const loadNextUrl = () => {
      if (urlIndex >= photo.photoUrls.length) {
        img.src = 'https://via.placeholder.com/300x200?text=Image+Unavailable';
        img.alt = `Unavailable photo: ${photo.title}`;
        return;
      }
      img.src = photo.photoUrls[urlIndex];
      urlIndex++;
    };

    img.onerror = loadNextUrl;
    loadNextUrl();

    // Add photo title for accessibility
    const title = document.createElement('p');
    title.textContent = photo.title;

    const photoCard = document.createElement('div');
    photoCard.classList.add('photo-card');
    photoCard.appendChild(img);
    photoCard.appendChild(title);

    photoGrid.appendChild(photoCard);
  });
}

getPhotos('cats');

Final Notes #

• Hotlink Restrictions: Some owners disable hotlinking for their photos. In this case, even valid URLs will fail—using a placeholder is the only solution.
• API Rate Limits: Make sure you’re not hitting Flickr’s API rate limits, which could cause incomplete metadata responses.
• Private Photos: The API might return metadata for private photos if your app has permission, but you won’t be able to load the image directly.

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