php - 我想在打开框模式时在图像下显示 alt 属性

Question

我想在打开框模式时在图像下显示 alt 属性，我从 mysql 调用图像。
PHP代码:

while ($row = mysqli_fetch_array($result)) {
    <img  id="'.$row['id'].'" data-toggle="modal" data-target="#myModal2" 
     alt='.$row['caption'].' src = "data:image;base64,'.$row['image'].'" 
     style="width:100%">
    <h5 data-toggle="modal" data-target="#myModal2">'.$row['caption'].'</h5>

HTML 代码:

<div id="myModal2" class="modal fade" role="dialog">
 <span id="close" data-dismiss="modal">&times;</span>
    <div class="modal-content">
    <img class="img-responsive " src=""/>
    </div> 
    </div>

JavaScript 代码:

$(document).ready(function () {
    $('#myModal2').on('show.bs.modal', function (e) {
        var image = $(e.relatedTarget).attr('src');
        $(".img-responsive").attr("src",image);
    });
  });

Answer 1

您可以在模态中创建例如 p 元素，然后使用 text() 函数从 alt 属性向该元素添加文本.

HTML:

<div id="myModal2" class="modal fade" role="dialog">
 <span id="close" data-dismiss="modal">&times;</span>
  <div class="modal-content">
    <img class="img-responsive " src=""/>
    <p></p>
  </div> 
</div>

JS:

$(document).ready(function () {
  $('#myModal2').on('show.bs.modal', function (e) {
    var image = $(e.relatedTarget).attr('src');
    $(".img-responsive").attr("src",image);
    $("#myModal2 p").text($(e.relatedTarget).attr('alt'));
  });
});