Twitter Bootstrap模态框无法显示远程图片。

Question

我正在使用Twitter Bootstrap的模态窗口来加载远程图像。

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

我正在按照这些文档操作

模态框中的图片无法正确显示。

我收到了一堆混乱的数据 -

发生了什么？如何解决？

- Finnnn

Answer 1

是的，我也遇到了这个问题。我找到的答案在这里。

我创建了一个链接，就像这样：

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

- Mark Robson

Answer 2

使用href指定模态框的远程内容时，Bootstrap使用jQuery的load方法获取内容，然后将检索到的内容放入模态框的body元素中。简而言之，只有在远程内容（href值）加载HTML或文本时才有意义。

您看到的是预期的结果，因为这与在文本编辑器中打开gif文件并将其粘贴到HTML标签中所发生的情况相同。

要使它按照您想要的方式工作，href需要指向包含<img>标记引用您想要在模态框中显示的图像的HTML文档。

- Joseph Spiros

Answer 3

在马克·罗布森的文章中，将“this”改为“this.href”：

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

=>

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

（我没有发表评论的声望）

- Viktor Chabanenko

---

你能否添加一些解释，说明海报做错了什么以及这如何修复它？ - Tom