1

introducir la descripción de la imagen aquí

Necesito mostrar en un modal de Bootstrap la información especifica de un producto al hacer click en el botón 'ver más'. El problema que tengo es que al abrir el modal se muestran todos los datos del producto pero no logro que se muestre la imagen del producto (solamente se muestra el nombre de la imagen pero no la foto en si).

El código del botón 'ver mas': al botón le agregue el atributo 'data-producto' en donde, a través de php, le paso los datos del producto que están en la base de datos.

<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
        <button class="text-center btn btn-dark detalle-prod" data-bs-toggle="modal" data-bs-target="#detalle-prod" data-product = "<strong>Producto:</strong> <?php echo $producto['nombre'] . '<br>'. '<strong>Precio:</strong> $'. $producto['precio'] . '<br> <strong>Descripcion:</strong> ' . $producto['descripcion'] . '<br> <strong>Imagen del producto:</strong> ' . $producto['imagen']?>">Ver más</button>
  </div>

Este es el código js: capturo el boton 'ver mas', le agrego el evento click y luego en la variable producto guardo el valor del atributo 'data-product' que tiene el boton 'ver mas'. Luego capturo el modal (que va a disparar dicho boton) y al mismo le agrego el contenido de la variable producto con la funcion html() de jquery.

$(document).ready(function() {

    $('.detalle-prod').click(function(e){
        e.preventDefault();
        let producto = $(this).attr('data-product');
        $('#detail-prod').html(`<p> ${producto}</p>`);
    });
});
10
  • Pero no estas filtrando los resultados.. ahora ${producto} puedes hacerle un console.log y decirnos que tiene? el 27 oct. 2021 a las 21:09
  • El console.log me muestra la información de cada producto. En cuanto a filtrar datos, sé que lo puedo hacer por el id pero no sé como hacerlo si la información no viene por POST el 27 oct. 2021 a las 21:27
  • Si pero para poder ayudarte debes colocarlo en la pregunta, porque no se que trae o no producto :) el 27 oct. 2021 a las 21:29
  • En la pregunta deje una foto con el modal y lo que me muestra la consola al hacer click en el boton 'ver mas' el 27 oct. 2021 a las 21:35
  • Dices en el post que solo te muestra el nombre de la imagen, en el ejemplo cual es el nombre de la imagen? el 27 oct. 2021 a las 21:37

1 respuesta 1

0

Antes que nada debes guardar la imagen con su formato (JPG,PNG,GIT,...) Luego para mostrar la imagen en HTML debes crear la etiqueta IMG

Tienes que mostrar la imagen y no el nombre

Tu código va así

<br> <strong>Imagen del producto:</strong> ' . $producto['imagen']

Aquí debes poner

<br> <strong>Imagen del producto:</strong> <img src="'.$producto['imagen'].'">' 

De esta manera te tomara la imagen y se verá.

por ultimo colocas tu tamaño a la imagen para que funcione a tu gusto con width y height

1
  • Ya me funcionó tu código, me faltaba agregar en la ruta la carpeta img. Muchas gracias por tu ayuda! el 27 oct. 2021 a las 23:59

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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