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 + '"/>');
});

图像显示在网页上，但如果我点击链接，则代替图像，模式中会出现乱码文本。控制台中没有错误。如果我需要提供更多详细信息，请告诉我。

更新

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

Answer 1

在您的网址前添加http:是否可以解决问题？您环境中的某些内容可能无法正确处理协议相关URL。

Answer 2

在你的代码中，模态体中只有图像。

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

也许您可以尝试在模态对话框中添加modal-lg课程。

或者更改窗口的大小以使模态更大？

或者将此添加到您的css

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

Answer 3

我在JavaScript代码段的正上方添加了$('.comic-modal').modal('hide');，现在Modal正常工作。尽管如此，我还是不知道这个解释。

Image src在Bootstrap Modal中输出乱码文本

3 个答案: