twitter bootstrap modal not displaying remote image

Question

I'm using twitter bootstrap's modal window to load a remote image

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

I'm following these docs

The image is not rendering correctly in the modal.

I get a load of jumbled data instead -

What's happening? How can I fix?

Answer 1

Yes, I had this 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 2

When using href to specify remote content for a modal, Bootstrap uses jQuery's load method to fetch the content, and then sticks the retrieved content into the modal's body element. In short, it only makes sense when the remote content (the href value) loads HTML or text.

What you're seeing is expected, as it's the same thing that would happen if you opened the gif file in a text editor, and just pasted it into an HTML tag.

To have it work the way you want, the href needs to point to an HTML document that contains an <img> tag that references the image you want in the modal.