0

Estoy tratando de que me muestre una imagen que tengo en mi base de datos a través de un modal, me muestra la imagen pero se me repite la primera imagen en todos los modales, es decir, tengo 10 registros y se me repite la primera imagen en todos los registros.

Esté es todo mi código:

<?php 
    ini_set('display_errors', '1');    
    include './config/config.php';    
    $query = "SELECT * FROM img";
    $ans = mysqli_query($conexion, $query);
    
    while($row = mysqli_fetch_assoc($ans)){        
        $id = $row['id'];
        $soli = $row['solicitud'];
        $img = $row['img'];         
        //var_dump($img);        
        $image = base64_decode($img);  
        $final_image = base64_encode($image);
?>



<button type="button" class="btn btn-primary" data- 
  toggle="modal" data-target="#exampleModal">
  Ver solicitud
  </button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Solicitud número <?php echo $soli ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img id="myImg" style="width: 100%; height: 100%;" src="data:image/jpeg;base64,<?php echo  $final_image ?>">
      </div>
    </div>
  </div>
</div>

<?php } ?>
11
  • ¿Revisaste el contenido de tu tabla? El código parece correcto, si se repiten datos, puede que esos datos estén repetidos en la tabla que estás consultando... Supongo que el contenido HTML al final del código debe aparecer por cada fila de la tabla ¿no?
    – A. Cedano
    Commented el 13 abr. 2022 a las 16:38
  • @A.Cedano En la tabla guarde imágenes distintas, cuando pongo las imágenes en una etiqueta <img> me aparecen y ninguna se repite Commented el 13 abr. 2022 a las 16:50
  • investigue en siguiente problema es.stackoverflow.com/a/223924/45023 Commented el 13 abr. 2022 a las 17:01
  • ¿Y entonces dónde es que se repiten las imágenes?
    – A. Cedano
    Commented el 13 abr. 2022 a las 17:06
  • @A.Cedano con todas los registros que tengo en cada uno tengo una imagen pero en vez de verse la imagen de ese registro se ve la misma imagen para todos Commented el 13 abr. 2022 a las 17:10

1 respuesta 1

3

prueba algo como este ejemplo, que genera un modal aleatorio cada ves que se invoca

function addmodalb4(id){ // carga un modal para usarlo con referencia en id
    let elem = document.createElement('div');
        elem.innerHTML=`
                <div class="modal fade" id="Modal_b4_`+id+`" data-backdrop="static"  tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                     <div class="modal-header">
                        <h5 class="modal-title" id="Modal_b4_titulo`+id+`">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                        </div> 
            <div class="modal-body"   id="Modal_b4_`+id+`_conten">
                        
                        </div>
                        <div id="Modal_b4_`+id+`_modal_footer" class="modal-footer">
                        </div>
                    </div>
                    </div>
                </div>`;
        document.body.appendChild(elem);
}
function creaModal(titulo,mensaje){
let Nid=Math.floor(Math.random() * 100000) + 1;
    addmodalb4(Nid); //Genera nuevo modal random ID
    $('#Modal_b4_'+Nid).modal();
    $('#Modal_b4_titulo'+Nid).html(titulo);
    $('#Modal_b4_'+Nid+'_conten').html('<img src="'+mensaje+'">');
 }
.b{  padding: 10px;  background-color: aliceblue;  width: 100px; margin: 5px;  float: left;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>


<div class="b" onClick="creaModal('Este es un modal 1','https://i.picsum.photos/id/535/300/300.jpg?hmac=crYGpbcKPzOGYWJYYUgrnI9hQeZN-KiypxKYh1-EW1E');">imagen 1</div>
<div class="b" onClick="creaModal('Este es un modal 2','https://i.picsum.photos/id/856/300/300.jpg?hmac=K6AeHs9gpB-QHPd5KecDYgrBll0Lq6Lh6nb_nsH2Cic');">imagen 2</div>
<div class="b" onClick="creaModal('Este es un modal 3','https://i.picsum.photos/id/480/300/300.jpg?hmac=SNeDbPA-87bxLtQ9W6l9Dy1QvsNoJhqR6IBDH5ACSHk');">imagen 3</div>
<div class="b" onClick="creaModal('Este es un modal 4','https://i.picsum.photos/id/781/300/300.jpg?hmac=TKvIU2oKRGUW2wfK_7ckbYvHIwgcA92KdsTQJD7YHco');">imagen 4</div>

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.