React -- Mapping specific images to specific cards - reactjs

Question

Trying to map specific images to specific card components as backgrounds. Problem - When I pass data.bgUrl into style={{ backgroundImage:`url(${data.bgUrl})`}} the result is surrounded by quotes ("img1") instead of just path name (img1). As a result, images won't load. Any insights?
import AthleteData from "../athletes.json";
import img1 from "../assets/img1.png";
import img2 from "../assets/img2.png";
import img3 from "../assets/img3.png";
import img4 from "../assets/img4.png";
....etc
import Card from "./Card";
import "./cards.scss";
export default function Cards() {
return (
<div className="cards-container">
<div className="cards">
{AthleteData.map((data, key) => {
return (
<div
key={key}
style={{
backgroundImage: `url(${data.bgUrl})`,
}}
>
<Card
key={key}
name={data.name}
date={data.date}
link={data.link}
/>
</div>
);
})}
</div>
<h3>Load More Cards</h3>
</div>
);
}

Answer 1

If you used backgroundImage in style, you don't need to import images. Please check your data.bgUrl is the correct path for each image.
also, set the image size through width and height, or backgroundSize in the style. You may need to set backgroundRepeat in the style as well.

Answer 2

I'm assuming that the 'AthleteData' you are importing is an object where one of the properties is called 'bgUrl' and that the value of that property is set to be a string such as 'img1'. The problem with that, if it is the case, is that the line where you are attempting to call that property (of bgURL) is that it still only represents a string, even if you have an imported variable that is called 'img1' as well. In your Athletes.json file you would want to have a dynamic reference to the image location. The problem with this is that .json files don't support import statements.
What I would recommend doing is to make a simple Javascript file where you import all your images as you did above and set them into a single object below them. Set the property 'bgUrl' to the dynamic references that those import statements create, and then you should be good. I will demonstrate below:
//This would be the new athletes.js file. Not a .json file
import img1 from "../assets/img1.png";
import img2 from "../assets/img2.png";
import img3 from "../assets/img3.png";
import img4 from "../assets/img4.png";
....etc
const AthleteData =
[
{name: 'Athlete1', bgUrl:img1, ...},
{name: 'Athlete2', bgUrl:img2, ...},
{name: 'Athlete3', bgUrl:img3, ...}
]
export default AthleteData
Then when you import this and use it in your jsx it would look like so:
import AthleteData from "../athletes.js";
// No longer importing those image refrences here
import Card from "./Card";
import "./cards.scss";
export default function Cards() {
return (
<div className="cards-container">
<div className="cards">
{AthleteData.map((data, key) => {
return (
<div
key={key}
style={{
backgroundImage: `url(${data.bgUrl})`,
}}
>
<Card
key={key}
name={data.name}
date={data.date}
link={data.link}
/>
</div>
);
})}
</div>
<h3>Load More Cards</h3>
</div>
);
}
Everything should roughly be the same in your jsx but you wouldn't need the import statements.