Search code examples
reactjsimagemodal-dialogreact-modal

Adding Image into Modal ReactJS

I'm trying to insert and style an image in my modal but I'm having trouble doing it. I've tried wrapping the image under a div and apply properties to that div but it doesn't seem to be working either. I've created a link to my sandbox: https://codesandbox.io/s/react-modal-rx1dz?file=/src/App.js

Thank you!

Solution

  • Instead of using simple string, you need to ref the image using require

    <img src={require('./modal.jpg')} />

    You can also use import

    import img from "./modal.jpg"; 
<img src={img} />

    I also changed a little bit the style in order to fit inside the div

    https://codesandbox.io/s/react-modal-forked-mpkzm