2

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.

CODIGO: introducir la descripción de la imagen aquí

 <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>
ACTUALIZACIÓN:

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();
  ?>
                    

introducir la descripción de la imagen aquí

11
  • Como generas el src de cada imagen? dudo que en tu base de datos hayas guardado eso como ruta...
    – gbianchi
    Commented el 15 jul. 2019 a las 13:23
  • lo muestro como una función. $DBImagen->viewImages(); Que es así include 'coneccion.php'; if(isset($_POST['save'])) { $DBImagen->uploadImage($_FILES); }
    – Jack More
    Commented el 15 jul. 2019 a las 13:44
  • pero si guardaste eso en la base,entonces no guardaste la ruta, guardaste el archivo.. puede ser?
    – gbianchi
    Commented el 15 jul. 2019 a las 13:47
  • Veo que eres un crack en mysqli. ya se que se desvia un poco del contexto pero en algun comentario si tu quieres claro me podrias decir si eso que hago está bien para mostrar los datos. Si tienes tu propio blog o algo me encantaria pasarme para aprender.
    – Jack More
    Commented el 15 jul. 2019 a las 13:49
  • 3
    PHPMyAdmin no es un gestor de bases de datos. Solo es una herramienta hecha en PHP que maneja una BD MySQL o Maria DB. Por favor edita la pregunta. Commented el 15 jul. 2019 a las 13:58

1 respuesta 1

0

Encontré la respuesta hace tiempo y la voy a compartir para futuras referencias para otros usuarios.

Hay que insertar donde uno quiera ver el texto importado esta $img:

<?php print($img['nombre que hay en la base de datos']); ?>

Y la $img la saldrá de aquí, un simple SELECT en pdo que mediante un while guardará los datos en img:

$SQLStatement = $this->DBConexion->prepare("SELECT * FROM catenombre");
        $SQLStatement->execute();
    
        while($img = $SQLStatement->fetch(PDO::FETCH_ASSOC))

La variable $img contiene los datos de tu tabla de datos, que tu al poner <?php print($img['nombre que hay en la base de datos']); ?> se insertaran en tu objeto creado. Cada linea será creado un objeto. Se que esta pregunta es antigua pero cualquier duda hagan un comentario, siempre me gusta editar y mejorar mis antiguas preguntas.

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