1

Ok so I'm trying to load images from external resources. My web api returns a json to my Nativescript app.

In my Nativescript code, I parse a json retrieved from my api, to construct the view manually. Everything works fine but the image part.

For the image, I proceed this way:

var image = new imageModule.Image()
image.src = page.bindingContext.news.getItem(args.index).image_original_link

then I attach it to my layout, through addChild.

I also tried to do it through an XML template, and I have the same problem:

<Image src="https://www.google.com/images/errors/logo_sm_2.png" stretch="none" />

this --^ is never rendered.

If I replace the url by an image located in my local directory:

image.src = "~/images/foo.png"

Then it works perfectly.

I tried to replace the dynamic source url fetched from my array by a static link to an image and it's not getting accessed (I checked the log on the webserver serving said image).

What am I doing wrong?

edit:

  • I'm testing on iOS

  • I already have the following in my plist:

    NSAppTransportSecurity NSAllowsArbitraryLoads

Dailyrox
  • 427
  • 2
  • 4
  • 14
  • Could you provide more info about the platform, you are testing the app. In latest iOS http is forbidden by default:http://stackoverflow.com/questions/30731785/how-do-i-load-an-http-url-with-app-transport-security-enabled-in-ios-9 – Nikolay Tsonev Oct 12 '16 at 13:52
  • @NikolayTsonev done! I added the info at the bottom of the post. Tell me if you need anything else :) – Dailyrox Oct 12 '16 at 14:01
  • You should take a look at the https://www.npmjs.com/package/nativescript-fresco {N} plugin for Android which uses the well known Fresco library for managing images in the memory of the OS. – Vladimir Amiorkov Oct 19 '16 at 06:47

1 Answers1

4

Actually on iOS you need to set the height/width of the image control; try doing something like:

<Image src="https://www.google.com/images/errors/logo_sm_2.png" stretch="none" width="100" height="100"/>

In addition if you are using v2.30 of NativeScript there is a bug if you set any parents "color" it can propagate down to the image and cause the image to not show. To fix either remove the "color" from all parents or upgrade to the 2.4 (when released or @next until released)

Nathanael
  • 5,369
  • 18
  • 23
  • thanks! here's the link to the issue: https://github.com/NativeScript/NativeScript/issues/2671 Doing what is recommended (upgrading to the @next version) fixed the problem. – Dailyrox Oct 13 '16 at 15:34