Question 266942 in Amazon Web Sevices Question posted in
The official Amazon Web Services documentation can be found here.

Amazon web services – Retrieve images from AWS S3 in react native app

I’m receiving urls like those from backend:

"https://s3.servauto.fr/compression-img/a5d6898a-382c-11ee-bbb5-00155dc60818.webp"

it’s not the exact url it’s just an example, but I changed only the domain.
I’m getting this if trying to access url from browser:

  <Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied.</Message>
    <Key>a5d6898a-382c-11ee-bbb5- 
    00155dc60818.webp</Key>
    <BucketName>compression- 
    img</BucketName>
    <Resource>/compression-img/a5d6898a- 
    382c-11ee-bbb5- 
    00155dc60818.webp</Resource>
    <RequestId>178EEB9E92B1E64A
    </RequestId>
    <HostId>4796f121e6ce1a5f5c2
    b8cb9130e56d2 75cde7e1bd216cac28e89f
     450d374bd1</HostId>
     </Error>

and i’m provided with this informations:

  • AccessKey
  • SecretKey
  • AWS Region
  • Service Name

but i don’t really understand what i should do to fetch images

I found in some resources that i should use aws-amplify. but in articles they are doing another thing: like authentication, sign in or uploading photos.
I also found that i can use aws-sdk. But in don’t really know what should i do.
Please take into account that i’m unfamiliar with this topic, so i couldn’t really try something. I’m not searching for a ready solution but to only understand what should i do like steps or someone explains to me. There is no enough resources about this topic.

Tags:

2

Answers


  1. 0

    I suggest using aws-amplify as you found on the documentation.

    In particular to configure just the S3 part you’d have a aws-exports.js file looking like this:

    export const awsConfig = {
     Storage: {
    AWSS3: {
      bucket: 'bucket-name', // (required) -  Amazon S3 bucket name
      region: 'eu-central-1' // (optional) -  Amazon service region
    }
  }
}

    And then within your App.js file have the Amplify.configure(awsConfig); statement

    Once you configured it you can get a signed URL for your image and display it to the user:

    import { Storage } from 'aws-amplify';

function RandomView() {
   
  const [imageUrl, setImageUrl] = useState();

  React.useEffect(() => {
    setImageUrl(undefined);
    Storage.get(item.imageKey, { validateObjectExistence: true })
      .then(signedUrl => {
        setImageUrl(signedUrl);
      })
      .catch(console.error);
  }, [item]);

  return (
     <Image style={{ width: 64, height: 64, borderRadius: 7 }} source={{ uri: imageUrl }} />
  );

    The imageKey mentioned there is simply the path of the item within the S3 bucket, for example profile/users/johndoe.png.

    You’ll also notice that when you ask for a signed url, unless you otherwise specified, the aws-amplify library will retrieve a signed url for the public/whatever/is/you/image/key/path. So if your files in S3 are not restricted to who is logged in, consider storing them within a root public folder

    Consider also using a placeholder if you don’t want to have a blank image while it’s loading

    Login or Signup to reply.
  2. 0

    First, is your image public, I mean everybody can access it without authentication?

    ANSWER IS YES

    You can access your image from your React frontend. Here is and example using AWS SDK

    ANSWER IS NO

    If your company has not configured public access, maybe it’s because your image should not be available publicly.
    In this case, all the info you have (AccessKey, service name, etc.) must be use from a backend (using SDK). Your backend will expose and endpoint (REST API for example). This endpoint will use the AWS SDK to retrieve the image and send it in the response. Your React frontend will call this endpoint to retrieve the image. Here is an example with NodeJS

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search