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>`);
});
});