CODEWITHSUNDEEP
javascriptreactjssweetalertsweetalert2
Taylor Austin
Taylor Austin

Reputation: 5987

How to return HTML within an Object using React and SweetAlert2

I want to show an image using SweetAlert2 within the text field. I do believe SweetAlert just returns and object. This is what it looks like:

swal({
  title: 'Title',
  text: 'text',
  type: 'success'
})

Each of these normally take a string. What I want to do is show and image within the text field. I tried doing text: (<img src="image_src" />) , but this did not work, it just shows [ojbect Object] in the alert.

I should of noted this but I also am putting in a variable inside the src for the image. So I need this to work somehow 

<img src={`${image_url}`} />

Please let me know if you need anymore code!

Upvotes: 1

Views: 1750

Answers (2)

Tiferet
Tiferet

Reputation: 1

import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'

const MySwal = withReactContent(Swal)
MySwal.fire({
title: 'Title',
html: `<img src='${image_url}'/>`,
type: 'success'
})

https://github.com/sweetalert2/sweetalert2-react-content

Upvotes: 0

Taylor Austin
Taylor Austin

Reputation: 5987

Thanks to the helpful comments from @helb I found out instead of using 

swal({
  title: 'Title',
  text: 'text',
  type: 'success'
})

I need to do this instead:

swal({
  title: 'Title',
  html: `<img src='${image_url}'/>`,
  type: 'success'
})

Upvotes: 1

Related Questions