javascript - 将图像插入模态对话框

Question

我想在 Modal 中插入一个图像，但我需要使用变量 data-image 的值因为它会根据图像的值而变化。

<script type="text/javascript">
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var title = button.data('title')
            var overview = button.data('overview')
            var image = button.data('image')
            var url = "<img src='https://image.tmdb.org/t/p/w600_and_h900_bestv2/+image+'></img>"
            var modal = $(this)
            modal.find('#title').text(title)
            modal.find('#image').attr('src',url)
            modal.find('#overview').text(overview)
        })
    </script>

                                <a href="#" role="button" data-id="{{$item['id']}}" data-title="{{$item['title']}}" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal">

<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle"><div id="title"></div></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <p><div id="image"></div></p>
            <p><div id="overview"></div></p>
        </div>
    </div>
</div>

我尝试使用一些形状，如 text、val、innerhtml，但没有奏效。让它按照我的需要工作的最佳方法是什么？

Answer 1

您需要使用 img与 div 相对的元素设置显示您的 img和其他内容在您的模式中动态显示。
它不工作的原因是 DOM内容已准备就绪，您正在将样式应用于 div它无法加载图像 asynchronously这就是为什么你没有看到任何东西。
我已添加 demo数据和其他几个按钮表明它现在都可以使用不同的 data来自 data-attributes. 现场工作演示:

$('#myModal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var title = button.data('title')
  var overview = button.data('overview')
  var image = button.data('image')
  var modal = $(this)
  modal.find('#title').text(title)
  modal.find('#image').attr('src', image)
  modal.find('#overview').text(overview)
})

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<a href="#" role="button" data-id="Foo" data-title="Foo" data-image="https://via.placeholder.com/150" data-overview="Foo" data-toggle="modal" data-target="#myModal">Click Me</a>
<br>
<a href="#" role="button" data-id="Bar" data-title="Bar" data-image="https://via.placeholder.com/300" data-overview="Bar" data-toggle="modal" data-target="#myModal">Click Me 2</a>
<br>
<a href="#" role="button" data-id="Example" data-title="Example" data-image="https://via.placeholder.com/350" data-overview="Example" data-toggle="modal" data-target="#myModal">Click Me 3</a>

<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">
          <div id="title"></div>
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p><img src="" id="image" /></p>
        <p>
          <div id="overview"></div>
        </p>
      </div>
    </div>
  </div>