Twitter bootstrap modal does not display remote image

Question

I use twitter bootstrap's smart window to upload a remote image

<a href="assets/500x300.gif" data-target="#image-preview" data-toggle="modal"><img alt="250x150" src="/assets/250x150.gif"></a> 

I am following these documents

Image is not displayed correctly in modal format.

Instead, I get the downloaded data -

What's happening? How can i fix it?

Answer 1

When using href to specify remote content for a modal method, Bootstrap uses the jQuery download method to retrieve the content, and then binds the extracted content to the modal body element. In short, this only makes sense when the deleted content (href value) loads HTML or text.

It is expected that you see, as well as what happens if you open the gif file in a text editor and simply paste it into the HTML tag.

In order for it to work the way you need, href must point to an HTML document containing an <img> tag that refers to the image you want in modal mode.

Answer 2

Yes, I had it too. The answer I found is here .

I created a link like this:

 <a href="gallery/blue.jpg" class="thumbnail img_modal"> //handler for link $('.img_modal').on('click', function(e) { e.preventDefault(); $("#modal_img_target").attr("src", this); $('#modal').modal('show'); }); //and modal code here <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Title to go here</h3> </div> <div class="modal-body"> <img id="modal_img_target"> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div> </div> 

Answer 3

In a post by Mark Robson - change 'this' to 'this.href':

 $("#modal_img_target").attr("src", this); 

=>

 $("#modal_img_target").attr("src", this.href); 

(I have no reputation for comment)