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

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

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

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

发生什么事情了?我怎样才能解决呢?

3 个解决方案

#1

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.

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

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.

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

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.

要让它按照您的要求工作，href需要指向一个HTML文档，其中包含一个推特引导模式不显示远程图像。标记，它引用您想要的模式的图像。

#2

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>

#3

-1

In post of Mark Robson – change 'this' to 'this.href':

在Mark Robson的博文中，将“this”改为“this.href”:

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

= >

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

(I don't have reputation for comment)

(我没有评论的名声)

#1

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.

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

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.

要让它按照您的要求工作，href需要指向一个HTML文档，其中包含一个推特引导模式不显示远程图像。标记，它引用您想要的模式的图像。

#2

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>

#3

-1

In post of Mark Robson – change 'this' to 'this.href':

在Mark Robson的博文中，将“this”改为“this.href”:

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

= >

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

(I don't have reputation for comment)

(我没有评论的名声)

秒客网

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

3 个解决方案

#1

#2

#3

#1

#2

#3

相关文章