0

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.

1 respuesta 1

0

como estás?

espero ser de ayuda con lo siguiente, he realizado pruebas con tu código en lo que no he encontrado novedad alguna, solo una recomendación:

desde ES6 -

style={{backgroundImage: url(${wine})}}

puedes usarlo de esta manera, confirmo su funcionamiento.

he realizado pruebas con imagenes que tengo alojadas en repositorios de buckets de Amazon con su respectiva URL y todo funciona correcto, por lo que te sugeriría validar factores como:

  1. Hacer un test con cualquier imagen de una URL pública, ejemplo imagen desde google, toma su URL(comparto esta url tomada desde developer mozilla https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg).
  2. Verificar si efectivamente las imagenes que esperar mostrar por URL son públicas, pues es lo mas común en estos casos.(Esto puedes validarlo solo con ingresar directamente desde el navegador a la URL).
  3. si has verificado que efectivamente puedes acceder a la url de tus imagenes directamente, verifica que no sea necesario posiblemente un proceso adicional que te esté faltando, ya que en ocasiones recurrimos a mapear solo cierta parte de la URL de la imagen y no su totalidad, ya que el dominio lo tenemos en alguna variable global o demás, es posible te esté faltando concatenar dicha variable en caso de manejarlo así.

Espero estos puntos sean de ayuda, ya que respecto al código la parte de la imagen está correcto.

Feliz día.

3
  • Hola andres, pense que se habia solucionado el problema, porque pase la carpeta de imagenes a la carpeta public, que viene por default en react-app, y las imagenes aparecieron correctamente. Luego tire mi servidor para cargarle mas vinos, y por ende, mas urls de mis imagenes, pero al levantarlo de nuevo con la nueva tabla de vinos, volvio a pasar que no se me ven los vinos. Espero explicarme. Commented el 5 dic. 2023 a las 0:28
  • Pude solucionarlo, lo que hice fue cambiar de url: localhost:3000/images/reserve-malbec.jpg antes guardaba en mi base de datos: ../../images/reserve-malbec.jpg porque mi componente estaba parado en un carpeta dentro de la carpeta src. puede haber algun problma con pasar la url asi? Commented el 5 dic. 2023 a las 1:23
  • Hola Joaquin de nuevo, Disculpas, por demorar en responder, te comparto algunos puntos. Primero, en caso de querer utilizar las images desde la carpeta public, React ddebe reconocerte esta ruta: '/public/images', ya que el utilizar '../../' es acceder a la ruta absoluta, está bien pero es mejor utilizar la primera opción. Por otro lado y debes tenerlo muy presente, procura no utilizar imagenes locales de tu repo, ya que sería muy mala práctica a medida que van creciendo la cantidad de productos, crecerá tu repo. Feliz code <3 Commented el 7 dic. 2023 a las 19:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.