Tengo el siguiente problema. Yo tengo unos archivos de imágenes guardadas en una base de datos. Las imágenes están guardadas mediante ruta.
La base de datos es mysqli
.
He estado buscando y he encontrado esto de los cards
de bootstrap
, entonces explico la situación que me gustaria
crear.
Usuario hace una búsqueda en mi blog fotográfico.
Al usuario al darle al botón de buscar saldrán un X de resultados.
Entonces ahora me gustaría que me ayudarais a enlazar el diseño de los card
de bootstrap
con las imágenes que salgan.
PROBLEMA: No logro que los card me enseñen las imágenes que yo tengo guardadas mediante ruta en mi base de datos phpmyadmin. Aquí que pasa, si yo tengo 6 imagenes se tendrían que aparecer seis card, si tengo siete tendrian que aparecer 7 card.
NOTA: Si tienen algún otro modelo que prefieren al mostar esas imagenes, no duden en comentar-lo, estoy abierto a todo tipo de sugerencias.
<div class="row mx-auto p-3">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="card ">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="card">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<div class="card .img-fluid">
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzE4IiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMxOCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTRmZTA1OGRkZmIgdGV4dCB7IGZpbGw6cmdiYSgyNTUsMjU1LDI1NSwuNzUpO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpIZWx2ZXRpY2EsIG1vbm9zcGFjZTtmb250LXNpemU6MTZwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTRmZTA1OGRkZmIiPjxyZWN0IHdpZHRoPSIzMTgiIGhlaWdodD0iMTgwIiBmaWxsPSIjNzc3Ii8+PGc+PHRleHQgeD0iMTE4LjA4NTkzNzUiIHk9Ijk3LjIiPjMxOHgxODA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="card-img-top" alt="Card image"/>
<div class="card-block">
<h4 class="card-title">This is a title</h4>
<p class="card-text">Each merged squad salts the wild porter. Should the charmed church dodge a
camera? The gown litters the rhyme. Another discrete elevator defects over the target.</p>
<a href="" class="btn btn-success">Button</a>
</div>
</div>
</div>
</div>
</div>
<script>
function showHide() {
$('#text1').slideToggle();
$('#text2').slideToggle();
$('#boton').slideToggle();
}
jQuery(document).ready(function () {
$(".oculto").hide();
$(".inf").click(function () {
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")) {
$(nodo).hide();
return false;
} else {
$(".oculto").hide("slow");
$(nodo).fadeToggle("fast");
return false;
}
});
});
</script>
</body>
</html>
Aquí tengo el código de como muestro las imagenes (Estas no tienen ningun estilo ni nada):
<?php
include 'coneccion.php';
if(isset($_POST['save']))
{
$DBImagen->uploadImage($_FILES);
}
/*Llamando a la función para visualizar las imagenes*/
$DBImagen->viewImages();
?>