CODEWITHSUNDEEP
react-native
Tien Do
Tien Do

Reputation: 11079

How to show local JPG image with React Native?

Does RN support local static JPG images? All sample codes here are about PNG images.

I see error "TypeError: unsupported file type" in the packager console. It must be not image location issue, it works if I change image name to test.png. Thanks.

<View>
  <Image source={require('./images/test.jpg')} />
<View>

Upvotes: 3

Views: 7472

Answers (2)

foureyedraven
foureyedraven

Reputation: 337

Others with non-corrupt images might have the issue that they need to add the dimensions to their images (height and width) in order for it to show. 

<Image source={require('./images/image1.jpg')} style={{height:30, width:30}} />

Upvotes: 0

Brunaine
Brunaine

Reputation: 1236

You just need to do :

<Image source={require('./images/image.jpg')} />

If you are calling this lets say in a Folder and the Folder images is not there you need to do require('../images/image.jpg') and check if the image is really jpg if you want to see the extension of the image:

  1. Start Windows Explorer, you can do this by opening up any folder.
  2. Click Organize.
  3. Click Folder and search options.
  4. Click the View tab.
  5. Scroll down until you notice Hide extensions for known file types, un-check this line by clicking the check box.
  6. Note To hide file name extensions, check this line.
  7. Click OK

And check then the extension of the file if its not jpg and its png just use .png and it works.

Upvotes: 2

Related Questions