图片src在BootstrapModal中输出乱码

Question

这是一个代码片段：

<a data-toggle="modal" class="comic-link" 
   href="//files.explosm.net/comics/Dave/adblocker2.png"     
   data-target="#comicModal">
  <div class="thumb-home thumbnail">
    <img id="comic" src="//files.explosm.net/comics/Dave/adblocker2.png">
  </div>
</a>

这是我的 JavaScript:

$('a.comic-link').on('click touchstart', function() {
  var url = $(this).attr('href');  
  $(".comic-modal .modal-body").html('<img src="' + url + '"/>');
});

图片显示在网页上，但如果我点击 link，则模态框内会出现乱码文本而不是图片。控制台中没有错误。如果我需要提供更多详细信息，请告诉我。

更新

它只发生在 Explosm Comics 而不是 Dilbert。

Answer 1

在你的url前面加http:能解决问题吗？您环境中的某些东西可能无法正确处理协议相关 URL。

Answer 2

在您的代码中，modal-body中只有图像。

我客你的图片标题或页脚乱码？

也许你可以尝试在 modal-dialog.

添加一个 modal-lg class

或者更改 window 的尺寸以使模态框更大？

或将此添加到您的 css

.modal-body img {
    width:100%;
}

Answer 3

我在 JavaScript 片段的正上方添加了 $('.comic-modal').modal('hide');，现在模态框可以正常工作了。我仍然不知道解释。

图片src在BootstrapModal中输出乱码

Image src outputs garbled text in Bootstrap Modal

javascript

jquery

modal-dialog

twitter-bootstrap