Inserting image into ionic2 dynamically

vikneke · January 22, 2017, 5:12pm

I am trying to add png files to my applications. However, keep getting 404 error content not found. By this time, I have tried many ways but none successful;

If I use the following, I only get “?” mark instead of an image and 404 error.

<img [src]="'assets/img/measure-img/' +'question.image'"/>

They have to be inserted dynamically, therefore, in html and not scss file.

Anyone having the same issue?

ankushagg93 · January 22, 2017, 5:35pm

See working example in my repo

https://github.com/aggarwalankush/ionic2-mosum/blob/master/src/pages/template/weather-list.template.html#L27-L28

https://github.com/aggarwalankush/ionic2-mosum/blob/master/src/pages/providers/util.service.ts#L113-L119

and image in assets folder

https://github.com/aggarwalankush/ionic2-mosum/blob/master/src/assets/img/sunrise.png

vikneke · January 22, 2017, 10:11pm

Many thanks! Made it work.

kierandes · March 8, 2018, 9:31am

Any more examples somewhere? Having a similar issue :). Thanks

ankushagg93 · April 8, 2018, 6:11am

@kierandes Updated links below

github.com

aggarwalankush/ionic-mosum/blob/master/src/components/weather-list/weather-list.html#L27-L28


<img [src]="utilService.getWeatherIcon('sunrise')" style="max-width:40%"
     onerror="this.src='assets/img/default.png'">

github.com

aggarwalankush/ionic-mosum/blob/master/src/providers/util.service.ts#L113


formatPI(pi: number, metrics: Metrics): string {
  if (!pi) {
    return null;
  }
  if (metrics.length === MetricLength.CM) {
    pi = pi * 25.4;
  }
  return _.round(pi, 5) + ' mm/h';
}


getWeatherIcon(icon: string): string {
  if (icon) {
    return 'assets/img/' + icon + '.png';
  } else {
    return 'assets/img/default.png';
  }
}


degToCard(deg: number): string {
  if (deg > 11.25 && deg < 33.75) {
    return 'NNE';

and images in assets folder