Repository navigation
Image src returning invalid image causes application failures #851
Description
From @eamon-hguk on June 8, 2017 12:1
Please, provide the details below:
Though my issue is a little different as it relates to the view.
I am trying to retrieve images in the view by using an Url pointing at images in an S3 bucket
<Image [src]="https://s3-eu-west-1.amazonaws.com/hgevents-images-test/26/1472222735722_Logo_Gradient_rgb.jpeg" width="100" height="100"></Image>
When using a URL to an invalid image, or a non-existent one (such as given above), I get the following error:
CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1091:24: ERROR Error: Uncaught (in promise): Error: Response content may not be converted to an Image file:///app/tns_modules/tns-core-modules/http/http-request/http-request.js:123:61 [<root>] UIApplicationMain@[native code] [<root>] start@file:///app/tns_modules/tns-core-modules/application/application.js:211:26 [<root>] bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:72:28 [<root>] bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:60:26 [<root>] anonymous@file:///app/main.js:5:57 [<root>] evaluate@[native code] [<root>] moduleEvaluation@[native code] [<root>] [native code] [<root>]
My problem is not so much that an error is thrown, but that this error stops other areas of the application working, such as data being rendered on other pages.
Is there a way to either get Nativescript to ignore this error, or to handle it, so it does not break my application?
If not then this is an issue, as it does not reflect how this would work in other applications, such as a web application, where the failure would not cause any collateral damage.
Did you verify this is a real problem by searching [Stack Overflow]
Possibly relates to: NativeScript/NativeScript#3381
Tell us about the problem
Please, ensure your title is less than 63 characters long and starts with a capital
letter.
Which platform(s) does your issue occur on?
Both
Please provide the following version numbers that your issue occurs with:
- CLI: 3.0.1
Please tell us how to recreate the issue in as much detail as possible.
See above
Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.
See above
Copied from original issue: NativeScript/NativeScript#4339
Activity
tsonevn commentedon Jun 16, 2017
Hi @eamon-hguk,
I reviewed your case and created sample NativeScript Angular 2 project, however, was unable to reproduce similar scenario with issues with data binding and page rendering, while loading an image from broken URL.
In my sample application, I am using the URL from the description. Could you review the sample project and make the needed changes, which will allow us to reproduce this case on our side
Archive.zip
tsonevn commentedon Jun 16, 2017
From @eamon-hguk on June 12, 2017 10:38
Hi @tsonevn
It seems the problem wasn't what I thought it was, it was when I was trying to load the image in the view using a function call inline, like below:
<Image [src]="getEventImage(eventId)" stretch="aspectFit"></Image>Whereas if I get an image in advance by adding doing it in the init block of the component class, it is fine.
Then I can load it like this:
<Image [src]="event.imageUrl" stretch="aspectFit"></Image>So there seems to be a problem, when you try and load an image using an inline function call, it cannot deal with the failure, but not as originally described.
tsonevn commentedon Jun 16, 2017
Hi @eamon-hguk,
Indeed loading an image source from a method will not work in NativeScript Angular 2 project. we will research what is causing this issue . However, after a little research, I found in this StackOverflow thread that the recommended way to load an image is to fill an array with the values and then bind to the array.
eamon-hguk commentedon Jun 16, 2017
Hi @tsonevn,
That's exactly what I ended up doing!
Thanks for your help
NickIliev commentedon Sep 8, 2017
+1 reported via t. 1129079
fix(Image): catch Response content may not be converted to an Image
fix(Image): catch Response content may not be converted to an Image
fix(Image): catch Response content may not be converted to an Image
NathanWalker commentedon May 27, 2018
@NickIliev your original issue from 2 years ago is still open. This PR prevents it from breaking end users:
NativeScript/NativeScript#5856
fix(Image): catch Response content may not be converted to an Image
fix(Image): catch Response content may not be converted to an Image
fix(Image): catch Response content may not be converted to an Image
fix(Image): catch Response content may not be converted to an Image (#…
fix(Image): catch Response content may not be converted to an Image