Adding image to alert controller

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:

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();

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?

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

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

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.

2 Likes

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