已获取downloadURL，如何在HTML img标签展示需授权的已上传图片？

Great job getting the upload flow working with the Authorization header! The tricky part here is that when you drop that downloadURL straight into an <img> tag's src attribute, browsers don't automatically include the Authorization header with the image request. That means your server will reject the request as unauthorized, and the image won't load.

Here are two reliable solutions to get this working:

1. Fetch the Image as a Blob and Use an Object URL #

This approach uses your existing token to fetch the image data directly, converts it to a browser-friendly temporary URL, and then assigns that to your img tag.

Code Example: #

// Assume you already have these values from your upload response
const downloadURL = '/download/pid1/VwXLvSKQz...';
const token = 'your-access-token-here';

async function loadAuthorizedImage() {
  try {
    // Fetch the image with your authorization header
    const response = await fetch(downloadURL, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });

    if (!response.ok) {
      throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
    }

    // Convert the response to a Blob (binary data)
    const imageBlob = await response.blob();
    // Create a temporary URL the browser can use for the img tag
    const objectURL = URL.createObjectURL(imageBlob);

    // Grab your img element and set the source
    const imgElement = document.getElementById('authorized-image');
    imgElement.src = objectURL;

    // Clean up the temporary URL once the image loads to avoid memory leaks
    imgElement.onload = () => {
      URL.revokeObjectURL(objectURL);
    };
  } catch (error) {
    console.error('Error loading authorized image:', error);
    // Optionally set a fallback image here
    document.getElementById('authorized-image').src = '/path/to/fallback-image.png';
  }
}

// Call the function to load your image
loadAuthorizedImage();

Corresponding HTML:

<img id="authorized-image" alt="Uploaded authorized image" />

2. Use a Signed Temporary URL (If Your Backend Supports It) #

If your backend can generate signed temporary URLs (like pre-signed URLs from cloud storage services), this is a cleaner approach. Instead of returning a plain downloadURL, have your backend return a URL that already includes authorization (via a signature or expiring token). You can then drop this URL directly into the <img> tag's src without any extra frontend code.

This avoids Blob handling and memory management, but it requires your backend team to implement the signed URL logic.

Key Notes: #

• For method 1, always revoke the Object URL after the image loads to prevent unnecessary memory usage.
• If your image is hosted on a different domain than your frontend, make sure your backend has proper CORS rules configured to allow requests with the Authorization header.

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