background image from JSON-Server-CodePudding

So I wanted to make some fancy looking cards like objects on the page and make the images from the JSON-server as their backgrounds but can't find any ideas on how to do it and need some help if it is even possible. I already tried adding some style in JSX but can't find the way to include variable as the url for the image. Here is some code: the first one is used to fetch the data from server and display that on the page and the second one is the method of showing the data on the page.

import { useEffect, useState } from "react";
import ProductList from "./ProductList";

const Products = () => {
    const [products, setProducts] = useState (null);

    useEffect (() => {
        fetch('http://localhost:8000/products')
            .then(res => {
                return res.json();
            })
            .then(data => {
                setProducts(data);
            })
    }, []);
    
    return ( 
        <div className="ProductList">
            {products && <ProductList products={products}/>}
        </div>
    );
}

export default Products;

    const products = props.products;
    

    return ( 
        <div className="ProductList">
                        {products.map((product) => (
                <div className="Product-Preview" key={product.id}>
                    <h2>{ product.title }</h2>
                    <p>{ product.description }</p>
                    <img src={product.image} alt="no image" width="40%" height="30%"/>
                    <div>{ product.price }</div><br />
                </div>
            ))}
        </div>
    );
}

export default ProductList;

Scss file for this part of code

.ProductList{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    & p{
        width: 350px;
        margin: 15px;
    }
    & .Product-Preview{
        border:rgb(129, 129, 129) solid 0.5px;
        border-radius: 30px;
        & h2, p, div {
            text-align: center;
        }
        & div{
            color: rgb(44, 38, 38);
            font-weight: 600;
        }
        
    }
    & .Product-Preview:hover{
        transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
        transform-style: preserve-3d;
        box-shadow: 5px 5px 24px 0px rgba(0,0,0,0.2);
    }
}

CodePudding user response：

In your CSS on the .Product-Preview add some relevant properties

& .Product-Preview {
  border: rgb(129, 129, 129) solid 0.5px;
  border-radius: 30px;
  background-size:cover;
  background-repeat:none;
}

and then on that element add the image as background through the style property

<div 
  className="Product-Preview" 
  key={product.id}
  style={{backgroundImage: `url(${product.image})`}}
>

and you can remove the img element now from the code.

To be able to add opacity to the background image, you will have to approach it from a different angle.

You can add an element that will hold the background image, instead of setting it directly on the card, and position that element to fill the card element. This is required to avoid setting the opacity on the card which will affect all child elements.

something like

& .Product-Preview {
  border: rgb(129, 129, 129) solid 0.5px;
  border-radius: 30px;
  overflow: hidden;
  position:relative;

  .backdrop {
    background-size: cover;
    background-repeat: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.25;
    z-index:-1;
  }
}

and

<div 
  className="Product-Preview" 
  key={product.id}
>
  <div 
    className="backdrop"
    style={{backgroundImage: `url(${product.image})`}}
  />