Adding image to alert controller

Ionic Framework
1

hi guys, i would like to know more about alert controller, do you think is it allowed to embed image on it? If so, how? any could teach me thanks. :slight_smile:

2

Hello,

It is possible to add an image to an alert. You can pass html tags to the message param and ionic will parse it as html. Styling is a bit harder tho - you have to do it inline in order for it to be working.

const alert = await this.alert.create({
                    header: HEADER,
                    message: `<img src="${mapUrl}" alt="g-maps" style="border-radius: 2px">`,
                    buttons: [
                        {
                            text: CANCEL,
                            role: 'cancel',
                        },
                        {
                            text: CONFIRM,
                            handler: ,
                        },
                    ],
                });

                await alert.present();
1 Like
3

Thanks very much! This works! I’m struggling - trying to get the image to fit into the alert - it seems to ignore height/width. Any ideas?

4

Try hardcoding styles in a style tag like in the example with style="border-radius: 2px"

6

Thanks very much for the reply. I tried it but actually can’t see any effect of style mods to the display. Here’s my code (including a one second dismissal - just wanted a quick preview):

this.alertCtrl.create({
header: card.title,
message: <img src="${card.imageUrl}" style="border-radius: 2px">,
// message: <img src="${card.imageUrl}" style="height: 10px;width: 10px">,
//message: <img src="${card.imageUrl}" alt="g-maps" style="border-radius: 2px" width="100" height="100" crop="fill">,
buttons: [’’]
}).then (alertEl => {
alertEl.present();
setTimeout( () => {
alertEl.dismiss();
}, 1000)
});

The image is narrow and tall - 200x334 - and the alert cuts the bottom off - here’s a screenshot:

imageInAlert

7

Try defining a css class selector at the global.scss file in your project and add the class to your image. Should work for u as well.

global.css

.card-alert {
    width: 100px;
    height 100px;
}

component.ts
const alert = await this.alert.create({
      header: 'boo',
      message: `<img src="${card.imageUrl}" class="card-alert">`
})

      await alert.present();

Make sure that the class selector is loaded from a global style sheet, otherwise it won’t work.

3 Likes
8

oh yes! Thanks so much!!! Now we’re getting somewhere. I’m not strong enough in css land - but this helped greatly - I can shrink the image enough so it fits. Much gratitude!

1 Like
9

does not work for me in 2023 with Ionic v6. The class actually gets added to the element, but the definition of the global css class doesn’t seem to have any effect inside the #shadow-root

10

found a workaround:
I made ALL my referenced images height smaller and put them in a subfolder of the normal actual images and refernced the subfolder. Ugly and not DRY but it works for my use case

If anyone has a better solution lmk

11

2023 UPDATE:

It’s simple using IonicSafeString:

public async openImage(img: string) {
    const alert = await this.alertController.create({
      animated: true,
      backdropDismiss: true,
      message: new IonicSafeString(`<img src="${img}" alt="photo" />`),
      buttons: [
        {
          text: 'Cerrar',
          role: 'cancel',
        },
      ],
    });
    await alert.present();
  }

IMPORTANT: You have to enable this functionality in your module, using the IoniConfig interface:

imports: [
    BrowserModule, IonicModule.forRoot({
      innerHTMLTemplatesEnabled: true
    }),
7 Likes