javascript - twitter bootstrap modal viser ikke fjernbillede

Jeg bruger Twitter Bootstraps modalvindue til at indlæse et eksternt billede

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

Jeg følger disse dokumenter

Billedet vises ikke korrekt i modalvinduet.

Jeg får i stedet en bunke sammenblandet data -

Hvad sker der? Hvordan kan jeg fikse det?

Svar #1

Ja, jeg havde dette også. Svaret jeg fandt er her.

Jeg oprettede et link som dette:

<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>

Svar #2

Når man bruger href til at angive fjernindhold til en modal, bruger Bootstrap jQuerys load-metode til at hente indholdet og indsætter derefter det hentede indhold i modalens body-element. Kort sagt giver det kun mening, når det fjernindhold (href-værdien) indlæser HTML eller tekst.

Det, du ser, er forventet, da det er det samme, der ville ske, hvis du åbnede gif-filen i en teksteditor og bare indsatte den i en HTML-tag.

For at få det til at fungere, som du ønsker, skal href pege på et HTML-dokument, der indeholder en <img>-tag, som refererer til det billede, du vil have i modal-vinduet.