CODEWITHSUNDEEP
react-native
Sebastian Dahlgren
Sebastian Dahlgren

Reputation: 967

Load remote image without extension

I'm trying to load remote images without filename extensions. The URLs looks something like this:

http://i.efritin-st.com/73b7a349-9c58-4881-886f-39e7c4cf7c2c/88/66/cropped.webp

And my code looks like:

<Image
  source={{uri: imageUri}}
  style={{width: 60, height: 88}}
/>;

Where the imageUri is the full URL listed above. It works well for other images like e.g. http://i.imgur.com/UePbdph.jpg. But not when I point at something without a regular extension.

Or at least thats my guess. Any other ideas? Not proper headers or something for example?

Upvotes: 0

Views: 2080

Answers (1)

Daniel Basedow
Daniel Basedow

Reputation: 13396

Your example URL actually has an extension ".webp". It's a WebP image. iOS does not support WebP out of the box and react-native does not add any support either. If you are in control of the image cropping, the easiest solution would be to change the format to JPEG (or any other supported format).

Alternatively you can register your own RCTImageDataDecoder implementation for WebP. This shouldn't be too hard. You can have a look at the implementation of RCTGIFImageDecoder to see how it is done. For creating the UIImage you could use iOS-WebP for example.

Upvotes: 1

Related Questions