Bootstrap 模态框本身没有嵌入图像

Question

我有一个电子商务网站，我试图在其中打开模式内的图像以将其放大。产品页面显示产品的图像列表，当用户单击图像时，它应该在模态中显示。

这是一个使用打字稿的 angular 项目，但我选择在 html 中嵌入一个简单的 jQuery 函数。问题是当单击图像时，模态打开时里面没有图像。浏览器控制台中没有错误，因此难以诊断。

代码如下：

//loop over the images associated with the product
<div class="container" style="border-color: #1111110d; border-style: solid; border-radius: 50px; width: 80%; padding-bottom:40px;">
        <div class="image-row">
          <div class="image-column" *ngFor="let image of product.productImageList; let i = index">
            <a href="#" id="{{image.imageId}}" data-toggle="modal" data-target="#myModal">
              <img src="{{image.imageUrl}}" id="{{image.imageId}}" class="img-responsive" width="250px" >
            </a>
          </div>
        </div>
      </div>

data-target目标模态代码如下：

  <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Image</h4>
      </div>
      <div class="modal-body" id="showImg">
        <!-- here we create the image dynamically -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

然后 jquery 函数嵌入在同一个 html 页面中：

<script type="text/javascript">
  $(document).ready(function() {
  $('img').on('click', function() {
    console.log('Clicked...');
      $("#showImg").empty();
      var image = $(this).attr("src");
      $("#showImg").append("<img class='img-responsive' src='" + image + "' />")
  });
});
</script>

根据我的理解，这应该将 imageSrc 嵌入 <div class="modal-body" id="showImg"> div。

但是，当单击图像时，它会在 html 页面上显示以下内容（没有图像的空模式）：

老实说，我不明白这是怎么回事，因为我已经从另一个来源中提取了这段代码并对其进行了修改以适应我的需要：

fiddle

我开始认为这是因为我在图像源上循环，有些东西没有完全正确地通过。

我已经尝试将 console.log() 实现到 jquery 函数中，只是为了查看代码是否被触发，但我在控制台中什么也得不到，这也让我觉得 jquery ID 无效！

如有任何帮助，我们将不胜感激！

Answer 1

我实际上以一种更简单、更“angular”的方式解决了这个问题。

我写了一个函数，它基本上捕获了需要在模态中显示的图像的 src：

loadImageInModal(imgSrc) {
  this.imageSrc = imgSrc;
}

然后可以通过以下方式将其简单地嵌入到模态中：

<img src="{{imageSrc}}" class="img-responsive" >

然后通过以下方式调用：

<img src="{{image.imageUrl}}" (click)="loadImageInModal(image.imageUrl)" id="{{image.imageId}}" class="img-responsive" width="250px" >

Bootstrap 模态框本身没有嵌入图像

Bootstrap Modal Is not Embedding Image inside itself

jquery

modal-dialog

angular