node.js - Displaying images stored in AWS v3 s3 in reactjs - Stack Overflow

admin管理员组

文章数量:1128305

I am trying to display images stored in s3 in my react application . I can upload the file in s3 and see it in my bucket with the preSignedUrl. While rendering the images in react, i keep on getting an error with the preSignedUrl which i generate in my server (Nodejs) application.

Here's the code snippet.

Server side code to download the image from S3.

const client = new S3Client({ region: aws.region });
  const command = new GetObjectCommand({
    Bucket: aws.bucketName,
    Key: imageName,
  });
  let presignedURL = await getSignedUrl(client, command, { expiresIn: 3600 });

This return's me the preSignedurU which i pass it to the frontend and try to display the same in an img tag in react.

<img
src="presignedURLGetObjct"
className="img-fluid rounded-start"
alt="..."
/>

In the Network tab i keep on getting this error while the request gets a status 200.

Network tab

I have created a IAM user and added the polies as below.

IAM User policy

My Bucket policy and CORS settings looks something like this.

AWS Bucket Policy

AWS CORS settings

While i check with the preSignedURL in browser i get this response.

preSignedURL Response

I am also providing the upload image code to S3 for the server side. Server side upload code.

   const secret = "secret";
     const hash = createHmac("sha512", secret).digest("hex");
     const imageName = "gucci2.jpg";
     const s3Client = new S3Client({
            accessKeyId: aws.accessKeyId,
            secretAccessKey: aws.secretAccessKey,
            region: aws.region,
          });
        
          const command = new PutObjectCommand({
            Bucket: aws.bucketName,
            Key: imageName,
            // Expires: 60,
            // ChecksumSHA256: hash,
          });
          const presigned = await getSignedUrl(s3Client, command, {
            expiresIn: 3600,
            // signableHeaders: new Set(["content-type"]),
            // Set of all x-amz-* headers you wish to have signed
            // unhoistableHeaders: new Set(["x-amz-checksum-sha256"]),
          });

Any leads would be appreciated.

本文标签： nodejsDisplaying images stored in AWS v3 s3 in reactjsStack Overflow