[FIXED] How to set up an image in an div using backgroundImage?

Issue

I have an div in which I have to display a photo using backgroundImage. I have an object in which an as URL path for the image which I later on return from the obect. I made the following code :

import React from 'react' 
import './user.css';


 const User = ({name,img,position,names}) => {
return ( <div className = 'card'>
    <div id='image' style={{ 
  backgroundImage: `url({${img}})` 
}}></div>
    <p className = 'card_name' id = 'based'>{name}</p>
    <p className = 'card_position'>{position}</p>
    <p>{names + ' '}</p>
</div>
 );
}

export default User;

When I try to run the page I dont have any errors but my image does not appear on the page. What my seem to be the problem?

Solution

You have extra parentheses on the value you are passing to the URL, Try this: You also need to add a height and width to the div

 style={{
            height: "200px", 
            width: "100%",
            backgroundImage: `url(${img})`,
          }}

Answered By - Gideon Bamuleseyo

Answer Checked By - Marilyn (PHPFixing Volunteer)