Tigris how to fetch images and use browser caching?

Questions / Help
3

There are multiple things you can do here.

If the images you want to serve are publicly accessible via your web interface, then you can create a bucket that is public-read (Tigris Dashboard → Bucket → Settings → Public / Private access). Additionally, you can also keep the directory listing disabled in case if you don’t want user to browse through your images in bucket.

If you don’t want all the objects in your bucket publicly accessible. You can mix public and private objects in your bucket Tigris now supports Object level access control - #3

In both of the above case, You can set the object level cache metadata and Tigris will honor it in response headers.

If you want the images to be accessible behind auth. You can leverage pre-signed URL with cache control parameters.

For pre-signed URL, yes the URL will be different everytime you sign - your backend can sign the request and serve to your frontend users and ensure to reuse within for example 60 days. Pre-signed URL can have response-cache-control param in it at the URL scope

const generatePresignedUrl = async () => {
  const bucketName = 'your-bucket-name';
  const objectKey = 'path/to/your/object.jpg';  // The object you're generating the URL for

  const params = {
    Bucket: bucketName,
    Key: objectKey,
    Expires: 3600,  // URL will expire in 1 hour (adjust as necessary)
    ResponseCacheControl: 'public, max-age=86400',  // Cache for 1 day (Override cache control during fetch)
  };

  try {
    // Generate the pre-signed URL
    const url = await s3.getSignedUrlPromise('getObject', params);
    console.log('Pre-signed URL:', url);
    return url;
  } catch (error) {
    console.error('Error generating pre-signed URL:', error);
  }
};

Or you can set it with the put-object that will be at the object scope and all the get-objects will honor it.