Push img from .ts

Hello,

I want to push img from my .ts file, but nothing works, I only have a grey square…

Here’s my .ts :

export class ApprochePage {

  panneaux: Array<{img: string}>;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
    this.panneaux = [];
      this.panneaux.push(
        {img: 'img/indication.png'}
        );
  }

And here’s my html page :

    <ion-card>
      <ion-card-content>
          <ion-img [src]="panneaux.img"></ion-img>
      </ion-card-content>
    </ion-card>

Hey @Poseyyy,

try this “panneaux[0].img”

Hello,

panneaux[0].img

Don’t work… :confused:

Where is your image folder located? My guess it’s under the assets folder. If that’s the case, you should push assets/img/indication.png. If not, where did you put your images or where are they coming from?

How about using simple img:

<img [src]="panneaux.img" />

Also make sure path, spelling and format is mentioned correct.

I saw that the common way was to put it in the “www” folder.
So it’s in “www/img”

You shouldn’t put stuff there. Everything is build to the www folder when you’re serving files/building for production/development.

When that happens, everything get’s copied over automatically to the www folder. You should put your images under src/assets/img instead.

1 Like

All right, thank you for the advice !

But this.panneaux.push( {img: 'assets/img/indication.png'} ); don’t work…

No, not in www folder.
your image should be in the src/assets/img/indication.png

Ionic copies the file to www while building, it’s their job.
Don’t make any change in www.

access it as:

img: 'assets/img/indication.png'

1 Like

Don’t forget that panneaux is an array, in this cause you are intereseted in the first element, so when you find out the right path you still need to call this way: panneaux[0].img to get the image in the array.

1 Like

Just tried with [src]="panneaux[0].img" but it don’t work

Like @arnoldparge, said you all is about the way your work directory organize. printing it will help to find out the right path.

I moved all my img in src/assets/img as @luukschoen said

checking image source in console.log will help

The console.log of this.panneaux give me that [{img: "assets/img/indication.png"}]

If you check your chrome dev tools, what does network -> img say you’re trying to get the IMG from? You should see a request for the image there. Little but strange. I just tried this:

<img [src]="myImage[0].img" height="20"/>

where myImage is an array with objects like this:

myImage: [{ img: string }] = [{ img: 'assets/images/myImage.svg' }];

and it works perfectly fine…

Ok, there was a problem with a button, my img appears when I put it in the constructor. But when I click on a button, they disappear and nothing happens

The event :

danger(event) {
    this.items = [];
      this.items.push(
        {img: 'assets/img/ak3.png'},
        {img: 'assets/img/ak4.png'},
        {img: 'assets/img/ak5.png'}
        );
  }

Ok, but would mine to tell exactly how want to use those images, how it is suppose to work, give more context.

I have pictures sorted by categories, and I want that when I click on a button they’re displayed

past the html and ts code off the page please this action please. that will help to reproduce the behavior.