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

Ionic Framework Ionic Angular
1 
    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

2

Hello, you need to add IonicSafeString

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

3

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
4

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

5

@NepCoder
For NOT using standalone components this worked for me:

In app.module.ts:

@NgModule({
declarations: [AppComponent],
imports: [
…
IonicModule.forRoot({innerHTMLTemplatesEnabled: true}),