Images without file extensions don't appear

[pejalo]

With <Image>, the source URI doesn't need a file extension to be recognized and rendered properly as an image. I just tested <ResponsiveImage> and that also works.

[jayesbe]

Do you have an example URI ?

[pejalo]

Here's one: https://s3.amazonaws.com/timemachinemedia/00081e4c6376f8abb5305d447d8c378d_file

Thanks for looking into this!

[jayesbe]

@pejalo

When I click this link in the browser, it tries to download. Doesn't that mean the URL is returning the incorrect mime/type? If it was an image shouldn't the browser display it ?

[pejalo]

Hey @jayesbe you are probably right. The image was just uploaded as a blob of data to Amazon S3. Apparently AWS has no way of bulk-updating the HTTP headers that are served along with the file.

It makes sense that the browser can't download the entire file automatically and then inspect it to see what to do with it. But in the case of using a component like <Image> or <CacheableImage> it certainly is convenient to have it be treated like an image by default.

I ended up using this instead because it "just works" like <Image>: https://github.com/kfiroo/react-native-cached-image BTW I was also having issues with <CacheableImage> where sometimes they would not load. This is probably because I needed to render 20+ instances on the screen all at once.

[nbolender]

I've found that iOS will not display a local image without an extension because it assumes PNG. More details here: https://github.com/jayesbe/react-native-cacheable-image/issues/23#issuecomment-260864612

The fix for this is to append an extension to the cached copy if one doesn't exist. The library you linked appends 'jpg' to any file without an extension: https://github.com/kfiroo/react-native-cached-image/blob/master/ImageCacheProvider.js#L41

[pejalo]

Interesting... thanks @nbolender ! I wonder if <Image> uses the same approach.

[radik]

Thanks, @nbolender ! You saved my time