Search code examples
angulartypescriptsweetalert2

How to display multiple images in sweet alert 2?


I'm building an Angular 2 application and is utilizing sweet alert 2 in parts of it. I need multiple images (at least two) to be displayed simultaneously in the pop-up. Any ideas?


Solution

  • Just add the <img> tags into the html parameter like so

    swal({
        title: '<u>example</u>',
        type: 'info',
        html:
        '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="Smiley face" height="42" width="42">'+ 
        '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" alt="Smiley face" height="42" width="42">',
        showCloseButton: true,
        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText:
        '<i class="fa fa-thumbs-up"></i> Great!',
        confirmButtonAriaLabel: 'Thumbs up, great!',
        cancelButtonText:
        '<i class="fa fa-thumbs-down"></i>',
        cancelButtonAriaLabel: 'Thumbs down',
    });
    

    This will allow you to add as many images as you like (Just keep adding your image tags). Hope this helps good luck!