0

I've already added the necessary domains to the whitelist/CSP rules. Image sources which actually redirect to the real source -- for example:

https://twitter.com/user_name/profile_image?size=bigger

Break when using ng-src, but only on Android OR with the Chrome dev tools screen size emulator (setting to one of the mobile device screen resolutions). It works when running Ionic on IOS and in browser with the full screen. There's no error being thrown in the browser or the logs. What in the world could be happening here?

These are two screenshots of the exact same code running, just reloaded in the different screen sizes.
enter image description here

enter image description here

Again, the code is not changed AT ALL between these two screenshots. The errors in the console there are totally unrelated and consistent between the two. Any ideas where to start?

EDIT: To be clear, the images that do load in the first screenshot are sourced from Instagram, not Twitter's redirected profile image URLs. NONE of the Twitter ones load in the smaller screen resolution, but all of the Instagram ones do. There are no screen-size specific CSS rules on any of the classes applied to these items.

Also, if I replace the src with the url which the redirect lands on, the image is rendered fine.

cassiusclay
  • 376
  • 1
  • 5
  • 19

1 Answers1

0

I think a plausible deduction might relate the cause of error to User-Agent.

Since the image breaks on mobile, it means that the src of image is not being redirected to a valid image resource.

You can see this in action for the above twitter URL. Check the network requests in developer tools. In normal mode, it redirects to a valid image which is correctly rendered. But in responsive mode, the image redirects to 'mobile.twitter' domain and the same URI is non-existent in that domain.

Solution ? Maybe load the image through ajax, but then twitter wouldn't allow Cross Origin Requests ! If it is really needed, I think you can write a simple script which extracts the image location from the passed url and then sets that as a redirect Location in its response, or maybe even download the image data and respond back with the data itself.

Or you can try to override the userAgent in Cordova. Set it to a non-mobile browser and I guess the image will load correctly. Refer to the following question to know more about how you can do it: How i can set User Agent in Cordova App

That is what I can think of in first attempt.

Community
  • 1
  • 1
Devesh Sati
  • 666
  • 4
  • 15
  • Hmm, that's definitely what is happening. Unfortunately, I'm using a third-party auth provider and they use that source URL as the default image for the users who sign up with Twitter. I'll have to come up with another solution. – cassiusclay May 11 '17 at 18:39