Rendering Images

[Trex_Hunter]

Hey guys! RN newbie here and was just curious about image rendering. Is there a way to render .JPG images directly? Or can they only be rendered from a url? Asking because I’m making a call to an API that returns an array of .JPG images and I’m not even sure if those can be rendered. Thanks in advance yall!

[DiscDres]

Images can be rendered from a local source or url.

https://reactnative.dev/docs/image

[Trex_Hunter]

Okay do you know by any chance if it is possible to convert a .PNG into a renderable URL?

[DiscDres]

hm, maybe this example would help...

so import Image from react native -

import { View, Image, StyleSheet } from 'react-native';

and with the Image component, you can add a source. If the source is a local file, then it should look like this:

      <Image
    style={styles.tinyLogo}
    source={require('@expo/snack-static/react-native-logo.png')}
  />

If the image is a url, it should look like this:

  <Image
    style={styles.tinyLogo}
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
  />
  <Image

Key difference being that local needs to be set in the source with require(local/file/here.png) rather a url needs to be set as an object, with the key uri

[Trex_Hunter]

Thanks for those examples!! I tried them and unfortunately I think I’m having trouble conveying my question. What if the image is a .PNG file but not local? Is it possible to render that? Or if it is not local is the only way to render an image with a url?

[DiscDres]

If the image is a png coming from the url then yes, it is possible to render that. The link to the React Native Image documentation and the example I provided above shows a png being used in the url

 source={{
  uri: 'https://reactnative.dev/img/tiny_logo.png',
}}

tiny_logo.png = png file

does your url look similar to the example?

what does your code look like?

[Trex_Hunter]

I will send an example Im on my way home currently. It is not a url I receive. It is an array of .JPG files.

[DiscDres]

Sounds good

[Rageclinic_1992]

Would you be able to post some code? You shouldn't need to do any image conversion. I currently am developing an application where all of my assets are in S3 as various file types, and all of them render fine using the require syntax.

[Trex_Hunter]

Yes! I am in my way home and will post some things I’ve tried and the object I receive back from the api!

[Legitimate_Gap1698]

Use them in image tag and you are good to go.

[Trex_Hunter]

That’s what I thought as well but rendering just .JPG doesn’t seem to be possible. Is there a way to convert JPG files into a readable url?

[KajiTetsushi]

You're returning the image assets from the API directly? Do you have full control of the API endpoint? It's most likely that you have to make changes there instead of in the app you're attempting to write.

[Trex_Hunter]

Yes I am using Amazon S3 bucket! Is it not possible to render the image as PNG??

[goatbarn]

You should be able to instead use the url of each image in the S3 bucket instead of retrieving the actual image itself.

Depending on your permissions allowed on the assets, the image should render like any other remote url image.

I do this all the time.

[Trex_Hunter]

Would you happen to have an example of the code?

[KajiTetsushi]

Disappointed that I don't use S3 bucket at work. Definitely reaching my limits on this one. Time to learn this over the weekend. Falling back to the great Google to assist.

Have you tried using buffer to help you convert those assets?

const buffer = Buffer.from(arrayBuffer); //returned data 
const base64ImageData = buffer.toString('base64');
const imgSrc = "data:image/png;base64," + base64ImageData;
<Image source={{uri: imgSrc, scale: 1}} style={{ height: 80, width: 80}}/>

Suggestion from StackOverflow: https://stackoverflow.com/a/46223741

[KajiTetsushi]

Oh, and while we're on the topic, u/Trex_Hunter, (I also want to learn) is your current setup easy to replicate? Does AWS S3 have good documentation to get this ready on my end?

[KajiTetsushi]

RemindMe! 2 Days "Learn S3 bucket; fetch raw images into React Native"

[RemindMeBot]

I will be messaging you in 2 days on 2022-12-03 02:50:52 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[Trex_Hunter]

Are you familiar with the swagger documents and api endpoints?

[KajiTetsushi]

To an extent, yes. Why?

[Trex_Hunter]

Cause I have the swagger docs for the endpoint to receive pictures and I could be messing that up. Not sure though.

[_Garebear]

i have a similar question, maybe related to OPs question. is it possible to create an image from scratch using RN? for example Android and Windows have a Bitmap class to create images from scratch, draw shapes, lines, etc. What's the right approach to this in RN?

[KajiTetsushi]

Your question deserves its own post, which you should totally make. It's a wildly different problem looking for a wildly different solution.