Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Image] Can't display avatar with HTTP 301 #5616

Closed
just4fun opened this issue Jan 29, 2016 · 15 comments
Closed

[Image] Can't display avatar with HTTP 301 #5616

just4fun opened this issue Jan 29, 2016 · 15 comments
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot. Type: Enhancement A new feature or enhancement of an existing feature.

Comments

@just4fun
Copy link

I created an iOS APP for university BBS (built in PHP) with React Native 0.14.

When I send request to fetch user info, I will get a record including filed avatar, which has value like http://bbs.uestc.edu.cn/uc_server/avatar.php?uid=32044&size=middle, and I assigned it to source filed of <Image> like below,

<Image
  style={styles.avatar}
  source={{uri: authrization.avatar}} />

Updated recently:

It seems like a PHP method (I'm not familiar with PHP), since the value of avatar will become http://bbs.uestc.edu.cn/uc_server/data/avatar/000/03/20/44_avatar_middle.jpg if I type the original value in the browser.

I tried to display http://bbs.uestc.edu.cn/uc_server/avatar.php?uid=32044&size=middle in html with <img> tag, it will get 301 code and then get the right picture with extension.

However, the avatar is not displayed sometimes with RN. See the screenshot.

Seems like RN didn't support the redirect well even in latest 0.21.

Does the <Image> component only support static picture file which ends with jpg|png|gif?

@facebook-github-bot
Copy link
Contributor

Hey just4fun, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

  • If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

@k7k0
Copy link

k7k0 commented Feb 19, 2016

@just4fun I'm having the same problem, images without extension aren't showed. Did you resolve the issue?

@just4fun
Copy link
Author

@k7k0 No, there is no feedback both on Github issue and StackOverflow.

@ide Any ideas?

@k7k0
Copy link

k7k0 commented Feb 19, 2016

@just4fun on my case it turned to be a file-format problem, it's a WebP file instead of regular JPG. Not supported on iOS yet http://stackoverflow.com/questions/34815053/load-remote-image-without-extension/34825697#34825697

@just4fun
Copy link
Author

@k7k0 thank you, in my case, there is no any extension, the url seems like a PHP method.

@grabbou
Copy link
Contributor

grabbou commented Mar 3, 2016

I think the issue here is not the type, but redirect that happens and that might not be supported in RN itself. If you could display image straight away w/o redirecting, that should solve the problem.

@just4fun
Copy link
Author

just4fun commented Mar 4, 2016

@grabbou yes, there is no extension but redirect in my case, I also think it's not supported well in RN. But sometimes it works well, it's weird.

@just4fun just4fun changed the title [Image] Can't display avatar sometimes [Image] Can't display avatar with HTTP 301 Mar 15, 2016
@just4fun
Copy link
Author

I tried to display http://bbs.uestc.edu.cn/uc_server/avatar.php?uid=32044&size=middle in html with <img> tag, it will get 301 code and then get the right picture with extension.

Seems like RN didn't support the redirect well even in latest 0.21.

@janicduplessis
Copy link
Contributor

@facebook-github-bot bugfix

@facebook-github-bot
Copy link
Contributor

Hey @just4fun, we're a small team and rely on the community to fix issues that don't affect fb apps. If you're sure this is a bug can you send a pull request with a fix?

@hayeah
Copy link
Contributor

hayeah commented Apr 27, 2016

#7262 should fix this problem.

@ghost ghost closed this as completed in 192ab66 Apr 27, 2016
@just4fun
Copy link
Author

@hayeah Thank you, but I found your PR has been closed?

@grabbou
Copy link
Contributor

grabbou commented Apr 28, 2016

GitHub bot closes PRs and merges them manually - see the commit reference above :)

@just4fun
Copy link
Author

@grabbou Gotcha, thanks.
@hayeah I'm gonna learn Objective-C if FB can't support this feature, since this issue avoid me to submit my RN app to App Store. Thanks again.

@hayeah
Copy link
Contributor

hayeah commented Apr 28, 2016

@just4fun the PR is merged

ptmt pushed a commit to ptmt/react-native that referenced this issue May 9, 2016
Summary:
+ Fixes facebook#5616
+ Bug RNPlay Demo: https://rnplay.org/apps/Eg2goQ

Test demo loads a Tumblr avatar image using a URL that 301 to a CDN. Try to edit and save the file to trigger image reloads.

The 302 image request succeeds the first time:

<img width="318" alt="screen shot 2016-04-27 at 9 37 03 am" src="https://cloud.githubusercontent.com/assets/50120/14860038/b2c04e8a-0c5b-11e6-9edf-78309048368b.png">

But it fails for subsequent loads. You should see:

<img width="307" alt="screen shot 2016-04-27 at 9 37 22 am" src="https://cloud.githubusercontent.com/assets/50120/14860048/b756e170-0c5b-11e6-9031-8f3cca8f2994.png">

+ The first image is a 302, only succeeds to load the first time.
+ The second image in the column adds a nonce as request parameter to render caching ineffective (but still a 302), and the problem doesn't occur.
+ The last image is the canonical url location (200).

Although NSURLSession hand
Closes facebook#7262

Differential Revision: D3231702

Pulled By: javache

fb-gh-sync-id: 364fcf9819188c63310768411d49e6431b2a01d3
fbshipit-source-id: 364fcf9819188c63310768411d49e6431b2a01d3
zebulgar pushed a commit to nightingale/react-native that referenced this issue Jun 18, 2016
Summary:
+ Fixes facebook#5616
+ Bug RNPlay Demo: https://rnplay.org/apps/Eg2goQ

Test demo loads a Tumblr avatar image using a URL that 301 to a CDN. Try to edit and save the file to trigger image reloads.

The 302 image request succeeds the first time:

<img width="318" alt="screen shot 2016-04-27 at 9 37 03 am" src="https://cloud.githubusercontent.com/assets/50120/14860038/b2c04e8a-0c5b-11e6-9edf-78309048368b.png">

But it fails for subsequent loads. You should see:

<img width="307" alt="screen shot 2016-04-27 at 9 37 22 am" src="https://cloud.githubusercontent.com/assets/50120/14860048/b756e170-0c5b-11e6-9031-8f3cca8f2994.png">

+ The first image is a 302, only succeeds to load the first time.
+ The second image in the column adds a nonce as request parameter to render caching ineffective (but still a 302), and the problem doesn't occur.
+ The last image is the canonical url location (200).

Although NSURLSession hand
Closes facebook#7262

Differential Revision: D3231702

Pulled By: javache

fb-gh-sync-id: 364fcf9819188c63310768411d49e6431b2a01d3
fbshipit-source-id: 364fcf9819188c63310768411d49e6431b2a01d3
samerce pushed a commit to iodine/react-native that referenced this issue Aug 23, 2016
Summary:
+ Fixes facebook#5616
+ Bug RNPlay Demo: https://rnplay.org/apps/Eg2goQ

Test demo loads a Tumblr avatar image using a URL that 301 to a CDN. Try to edit and save the file to trigger image reloads.

The 302 image request succeeds the first time:

<img width="318" alt="screen shot 2016-04-27 at 9 37 03 am" src="https://cloud.githubusercontent.com/assets/50120/14860038/b2c04e8a-0c5b-11e6-9edf-78309048368b.png">

But it fails for subsequent loads. You should see:

<img width="307" alt="screen shot 2016-04-27 at 9 37 22 am" src="https://cloud.githubusercontent.com/assets/50120/14860048/b756e170-0c5b-11e6-9031-8f3cca8f2994.png">

+ The first image is a 302, only succeeds to load the first time.
+ The second image in the column adds a nonce as request parameter to render caching ineffective (but still a 302), and the problem doesn't occur.
+ The last image is the canonical url location (200).

Although NSURLSession hand
Closes facebook#7262

Differential Revision: D3231702

Pulled By: javache

fb-gh-sync-id: 364fcf9819188c63310768411d49e6431b2a01d3
fbshipit-source-id: 364fcf9819188c63310768411d49e6431b2a01d3
@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 20, 2018
@hramos hramos added the Type: Enhancement A new feature or enhancement of an existing feature. label Mar 14, 2019
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Resolution: Locked This issue was locked by the bot. Type: Enhancement A new feature or enhancement of an existing feature.
Projects
None yet
Development

No branches or pull requests

8 participants