How to Show an Image in Modal Window Bootstrap


I have a table where I keep 6 data between them, a field where the path of an image saved on the server is saved.

I have a button inside the page called details where clicking it shows a modal window with the information of this, but I do not know how to show the image that was saved in the database, it only shows me the name of the image.

asked by Fanny 27.07.2016 в 20:42

2 answers


Assuming that you use bootstrap 3 (should work similar in 2 and 1), then, just include within the body of the modal an html tag of images 'img' and by javascript or php (I leave it to your choice) assign the route of the image in the property 'src', a simple example would be like:

<div id="myModal" class="modal fade" role="dialog">  
<div class="modal-dialog">
    <div class="modal-content">      
        <div class="modal-header">        
            <button type="button" class="close" data-dismiss="modal">×</button>        
            <h4 class="modal-title">Modal Header</h4>      </div>      
        <div class="modal-body"><img src="" class="img-rounded" alt="Cinque Terre" width="304" height="236" />   </div>      
        <div class="modal-footer">        
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>     

answered by 27.07.2016 в 21:00

Try the following code (PHP)

<img src="<?php echo $ruta; ?> ">

otherwise (JS)

<img src=ruta>
answered by 27.07.2016 в 20:59