推特引导模式不显示远程图像答案

【问题标题】：twitter bootstrap modal not displaying remote image推特引导模式不显示远程图像
【发布时间】：2012-09-23 13:11:39
【问题描述】：

我正在使用 twitter bootstrap 的模态窗口来加载远程图像

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

我是following these docs

图像在模态中未正确呈现。

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

发生了什么事？我该如何解决？

【问题讨论】：

标签： javascript ajax twitter-bootstrap modal-dialog

【解决方案1】：

是的，我也有这个。我找到的答案是here。

我创建了一个这样的链接：

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

【讨论】：

【解决方案2】：

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

您所看到的是预期的，因为如果您在文本编辑器中打开 gif 文件，然后将其粘贴到 HTML 标记中，就会发生同样的事情。

要让它按照你想要的方式工作，href 需要指向一个 HTML 文档，该文档包含一个标签，该标签引用了你想要在模式中使用的图像。

【讨论】：

【解决方案3】：

在 Mark Robson 的帖子中 - 将 'this' 更改为 'this.href'：

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

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

（我没有评论的声誉）

【讨论】：

您能否就发帖者做错了什么以及如何解决问题添加一些解释。