Unable to get image using background property in React - html

Question

I am trying to make cards from an array of objects containing ids and URL (relative paths ) to my images. But when I try to use mapping to return arrays and use background CSS property to set images I am unable to do it. Below is the code
import React from "react";
import { useState } from "react";
import { Fragment } from "react";
// import { Link } from "react-router-dom";
import styles from "../Styles/Services.module.scss";
const Services = () => {
const [pic, setPic] = useState(1);
const list = [
{ id: 1, url: "../Images/mentorship.jpg" },
{ id: 2, url: "../Images/entertainment.jpg" },
{ id: 3, url: "../Images/support.jpg" },
{ id: 4, url: "../Images/opportunity.jpg" },
{ id: 5, url: "../Images/counselling.jpg" },
];
// const clickHandler = (e) => {
// console.log(e.target.value);
// setPic(e.target.value);
// };
return (
<Fragment>
<section
className="bg-light p-5 text-dark"
style={{ fontFamily: "Lato" }}
>
<div className="container py-5 ">
<div className="display-2 text-center">Our Services</div>
<div className={`${styles.bodyCard}`}>
<div className={`${styles.options}`}>
{list.map((x) => {
var a = x.url;
return (
<div
key={x.id}
value={x.id}
className={`${styles.option} ${
pic === x.id ? styles.active : ""
}`}
onClick={() => setPic(x.id)}
style={{
background: `url(${
require(a).default
})`,
backgroundSize: "auto 100%",
backgroundPosition: "center",
}}
>
<div className={`${styles.shadow}`}></div>
<div className={`${styles.label}`}>
<div className={`${styles.icon}`}>
<i className="fas fa-walking"></i>
</div>
<div className={`${styles.info}`}>
<div className={`${styles.main}`}>Blonkisoaz</div>
<div className={`${styles.sub}`}>
Omuke trughte a otufta
</div>
</div>
</div>
</div>
);
})}
;
</div>
</div>
</div>
</section>
</Fragment>
);
};
export default Services;
I am unable to display images at code background
background: `url(${require(x.url).default})
But When I use this it works.
background: `url(${require("../Images/mentorship.jpg").default})
It gives this error in React
enter image description here
**Kindly do not make it a duplicate as I have checked other similar questions as well and have found no answer there. Thanks **

Answer 1

import React from "react";
import { useState } from "react";
import { Fragment } from "react";
// import { Link } from "react-router-dom";
import styles from "../Styles/Services.module.scss";
import image1 from "../Images/mentorship.jpg";
import image2 from "../Images/entertainment.jpg";
const Services = () => {
const [pic, setPic] = useState(1);
const list = [
{ id: 1, url: image1 },
{ id: 2, url: image2 },
];
// const clickHandler = (e) => {
// console.log(e.target.value);
// setPic(e.target.value);
// };
return (
<Fragment>
<section
className="bg-light p-5 text-dark"
style={{ fontFamily: "Lato" }}
>
<div className="container py-5 ">
<div className="display-2 text-center">Our Services</div>
<div className={`${styles.bodyCard}`}>
<div className={`${styles.options}`}>
{list.map((x) => {
var a = x.url;
return (
<div
key={x.id}
value={x.id}
className={`${styles.option} ${
pic === x.id ? styles.active : ""
}`}
onClick={() => setPic(x.id)}
style={{
background: `url(${a})`,
backgroundSize: "auto 100%",
backgroundPosition: "center",
}}
>
<div className={`${styles.shadow}`}></div>
<div className={`${styles.label}`}>
<div className={`${styles.icon}`}>
<i className="fas fa-walking"></i>
</div>
<div className={`${styles.info}`}>
<div className={`${styles.main}`}>Blonkisoaz</div>
<div className={`${styles.sub}`}>
Omuke trughte a otufta
</div>
</div>
</div>
</div>
);
})}
;
</div>
</div>
</div>
</section>
</Fragment>
);
};
export default Services;

Answer 2

As mentioned in the answerer above by https://stackoverflow.com/users/12902108/samira , it will work, just set style as style={{ background: `url(${photo})` }} assuming image is imported as photo .