Estoy trabajando en un proyecto con react, el problema que tengo es que quiero hacer un catalogo de vinos, donde la url de cada imagen esta almacenada en la base de datos junto con las demas características de los vinos, lo que quiero hacer en mi componente es que dependiendo el vino, se muestre la imagen correspondiente.
este es el codigo del componente:
import React, { useState, useEffect } from "react";
import WinesAppService from '../Services/wineApp.service';
import './StoreWines.css';
export default function StoreWines() {
const [ wines, setWines ] = useState([]);
function getAllWines() {
WinesAppService.getWinesList().then(
(response) => {
if (response.status === 200) {
console.log(response.data);
setWines(response.data);
}else {
alert("Error: status " + response.status);
}
})
.catch((error) => {
console.log('error while getting wines.', error);
})
}
useEffect(() => {
getAllWines();
}, [])
return (
<div className="store-container">
<div className="wines-catalogue">
{
wines && wines.length > 0 ? (
wines.map((wine) => {
return (
<div className="wines-cat" key={wine.id}>
<div className="wine-image" style={{backgroundImage: `url('${wine.img}')`}}
onClick={() => console.log('URL de la imagen:', `${wine.img}`)}/>
<button className="wines-b">{wine.name}</button>
<p>{wine.price}</p>
</div>
)
})
) : (
<li>No hay vinos disponibles</li>
)
}
</div>
</div>
)
}
en la parte de "className="wine-image" style={{backgroundImage: url('${wine.img}')}}" es donde quiero mostrar la imagen, pero de esta forma no me la muestra.
.wine-image {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(255, 255, 255, 0.638);
border-radius: 10px;
width: 200px;
height: 300px;
margin-right: 30px;
}
este es el css del div que contiene a la imagen, todo lo que contiene el div se ve, menos la imagen.
probe con un "require" pasandole el path de la imagen (que esta en una carpeta Images en mi proyecto) hardcodeado y ahi si funciona, pero no es lo que necesito.