0

I am trying to display images from my ionic app in in a similar fashion to the below:- 

<ion-header>

  <ion-navbar>
    <ion-title>Blah/ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>   
    <div id="image">
    </div>
</ion-content>

and in my typescript file, I write the following:- 

LoadImage(hash, id){
   document.getElementById("image").innerHTML = '<img src="'+ img_URL + '" />';       
}

However, using this method ends up with the image link being broken, and in debugging with js, a 403 error pops up. what is the correct method to display an image from an external source?

Thanks in advance.

Kavinda Keshan Rasnayake
  • 704
  • 1
  • 10
  • 27

2 Answers2

2

Let's try a more angular way of approaching this instead of the document.getElementById

<ion-content padding>
  <div [innerHtml]="myImage">
  </div>
</ion-content>

And then

public myImage: string;

// assume the parameters are neccessary in real code but not for MCVE
loadImage() {
   this.myImage = '<img src="'+ img_url + '"/>';
}

Pluker: http://plnkr.co/edit/WBeRRJyYucLwvckjh5W7?p=preview

So, sadly, after taking a look at one of your images, the response was

"The owner of this site does not allow hotlinking"

Which means that this image cannot be embedded.

Ivar Reukers
  • 7,560
  • 9
  • 56
  • 99
  • Thanks for the answer, but that did not solve my problem, I am afraid. – Kavinda Keshan Rasnayake Jan 26 '17 at 09:28
  • Well, check the plunker. With the code you provided, this solution works. Else, if you still have a `403` on your image, which means 'forbidden', you can't embed it for some reason. Can you give your imageUrl or are the images on local network or do they violate privacy? – Ivar Reukers Jan 26 '17 at 09:31
  • Well, the image links do work. And the funny part is, when I load them from the link itself, then the images start to load from that point onwards. Is it something to do with accessing native functionalities, cause I am trying to set up this approach anyways, and it is nopt working unfortunately. – Kavinda Keshan Rasnayake Jan 26 '17 at 09:41
  • Well I'm not sure, you're not showing that you're accessing native functionalities. But do you mean that, when you start your application you see no images, but when you manually enter a URL that the images will then start loading? – Ivar Reukers Jan 26 '17 at 09:44
  • Well, I have not used native functionalities at the moment, I have only used the direct method, which, in this case, doesnt work. Edit:- Yes, that is exactly what happens. – Kavinda Keshan Rasnayake Jan 26 '17 at 10:03
  • Can you post an image link? Or is it unreachable/classified? – Ivar Reukers Jan 26 '17 at 10:03
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/134059/discussion-between-adniwhack-and-ivaro18). – Kavinda Keshan Rasnayake Jan 26 '17 at 10:06
0

This is happening because of the automatic sanitization of the URLs by angular.

you can read about it here : https://angular.io/api/platform-browser/DomSanitizer

this is already answered in Angular 2 disable sanitize

Alan Joseph
  • 89
  • 5
  • Hi Alan, thank you for answering. However, the above problem occurred due to the fact that the server did not allow resource hotlinking. To factor that, I made a script to download the image from the server and then display the image. – Kavinda Keshan Rasnayake Jul 24 '17 at 06:37