Product preview card component

I'm utilizing Bootstrap for the columns and card layout in this project. However, I encountered a challenge regarding how to handle the product image. There are two approaches I considered:

1. Using Background Image:

.perfume-image {
    background-image: url("./images/image-product-desktop.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
2. **Using Image Path:**
When I tried to add the image directly in the HTML and apply a border-radius to the card, it didn't affect the column or the image itself.
So, my question is, how best can I approach this? Which approach is more practical and suitable for this project?