How do I display an image in Alert Controller in ionic 7?

    let confirmationAlert = await this.alertCtrl.create({
      header: 'UPLOAD SUCCESSFUL',
      message: '<img class="alertControlImg" src="./assets/imgs/alert/upload_success.png" /><br />' +
          'Thank you for your submission.',
      buttons: [
          text: 'GO TO HOME',
          cssClass: 'secondary',
          role: 'cancel',
          handler: () => {
            this.router.navigateByUrl('/home', {replaceUrl: true})
    await confirmationAlert.present();

I used to do this in ionic 6. But Ionic 7 doesn’t display the image instead it displays HTML tags itself.
Am I missing anything?

Any lead is appreciated. Thanks

Hello, you need to add IonicSafeString

Problem is solved here Adding image to alert controller - #10 by folsze

Set the property innerhtmltemplatesenabled to true.
this tutorial could help.
/// Ionic 7 : How to add image or html tags in Ionic controls Alert, Toast and Loading - YouTube

1 Like

For Ionic 7 with standalone component, solved by inserting in
importProvidersFrom(IonicModule.forRoot({innerHTMLTemplatesEnabled: true})),
in main.ts file.

For NOT using standalone components this worked for me:

In app.module.ts:

declarations: [AppComponent],
imports: [

IonicModule.forRoot({innerHTMLTemplatesEnabled: true}),