Broken img tag in ngFor [Angular] [Ionic] [Android]

ion-img
ion-img src not working
ion-img on error
ionic-image loader
ionic image placeholder
ionic image responsive
ionic image button
ionic display image from url

I have a modal with ngFor and img tags in it. After a few cycles, img tags shows broken images. The problem is not the url, because if i invert the array of urls, the problem is always with the latest emojis.

This is my code:

<div class="emoji" *ngFor="let emoji of emojis; trackBy: index;" (click)="add_msg(emoji)">
    <img src="{{ emoji }}">
</div>

What's the problem?

I am suspecting trackBy: index. Can you remove it and see the result?

Ionic image tag to have dynamic images 'onError' event, Hi, I am build an ionic app which is both online and offline. Ionic image tag to have dynamic images 'onError' event <ion-slide *ngFor="let img of edition"> <​img [src]= img.imgsrc loop="true" onError="src = img.imgsrc_offline"> </ion-slide> import { DomSanitizer } from '@angular/platform-browser';. I'm having a problem with sourcing an image with angular 4. It keeps telling me that the image is not found. Folder structure: app_folder/ app_component/ - my_componenet - image_folder/ -

I think CSS may cause an issue.

Try modifying the class used in the div tag i.e. emoji by altering/providing the dimensions for the image like height, width and padding.

bug: <ion-img> not appearing since 4.6.* (worked in 4.5.x , Bug Report Ionic version: [x] 4.x Current behavior: Currently, the tags do not load I'm assuming something is broken with the load trigger in 4.6.x/Stencil One. I started to see ion-img images not loading on Android 9 devices. I am also encountering this issue when upgrading from Ionic Angular 4.1.1 to  From @AmitMY on May 30, 2017 10:15. I think it will be better if you open this issue with ionic-native, as it is the camera plugin that is problematic. I just tested in my app, in which I have something like yours, on iOS, but only with sourceType, destinationType, and encodingType set (exactly the same values as yours), and it does show that image.

It seems that the images do not exist?

You can try this?

<div class="emoji" *ngFor="let emoji of emojis; trackBy: index;" (click)="add_msg(emoji)">
    <img [src]="emoji">
</div>

ion-img in virtualScroll do not display images as expected · Issue , Cordova CLI: 6.5.0 Ionic Framework Version: 3.0.1 Ionic CLI Version: To install the nightly of ionic-angular you can run npm install ionic-angular@nightly --save in I used the json to get the data and *ngFor to show the data on frontend. But, it seems that the img tag in ion-img stays blank due to some  I am fetching a large number of image URLs from an API and display them in a angular 2 web application. Some of the URLs are broken and i want to replace them with a default picture that is stored

How to set a default image in an ionic app, However if the image does not exist anymore or the link is broken I want the app to A few extra tidbits; the app is written with Ionic Framework and implements You can use img tag as describe in ionic and onError fallback I have created an Angular Directive to load default image until image loads and  Thanks for reply actually I am showing the image in grid view below is the image HTML tag that I am using a style background image not src to show the image in grid view. Below is the HTML code and CSS if I use your code then I am unable to fix image height.

Selenium XPath for a table - selenium-rc - android, Broken img tag in ngFor [Angular] [Ionic] [Android]. I have a modal with ngFor and img tags in it. After a few cycles, img tags shows broken images. The problem  This is fixed for me with the latest ionic-angular build. The only problem is the ion-img doesn't work. The above Plnkr is now working since I updated all the angular packages to 4.4.4 and ionic-angular to 3.8.0. You can run "ionic doctor check" to be walked through the process of upgrading. I updated the Plnkr to show off the ion-img not working.

Angular 2: NgFor without HTML Tag? - angular, My Problem is, that when i use a div *ngFor the slider is broken. <ion-slides #​secondSlider <ion-slides pager> <ion-slide *ngFor="let image of uploadService. There's a way to do something after ngFor? I'm trying to activate carousels after ngFor but it won't work without setTimeout and if i have 2 or more carousels with ngFor, the timeout work on first but in others carousels it don't work. I

Comments
  • Can you post the content of emojis ?
  • The content of emojis are all the pngs of Twemoji. If i invert the array of all emojis, the problem is always with the latest emojis.
  • When you serve your ionic project in browser, do you get any errors ? What src do you get if you inspect the last emojis src ?
  • When i serve my ionic project in browser i get no errors. Src of the last emoji is: localhost:8100/assets/imgs/emoji/1f1ff-1f1fc.png and it's correct.
  • (Broken images are only on Android. iOS works as expected)
  • Nothing’s change
  • then check that your images really exist and you can access them with the URL, because there is no reason why it does not work..
  • Sorry but i’ve already say that the URL is not the problem. Now i found a workaround: if i use infinite scroll there are no problems.