Question

早上好！

我遇到一个奇怪的问题，我不知道出什么问题了。我正在为数据库中的每个条目上传图像。我正在将图像名称上传到数据库，并且图像已成功发送到所需的目录。

现在是其中的棘手部分。我创建了一个模式，可以回忆起该图像。相同的模式可以在我使用的另一页中完美运行，但不适用于该页面。

<a href="#zoom" data-target="#zoom" data-toggle="modal" style="color:black;" class="small-box-footer" src="../dist/delivery_notes/<?php echo $row['del_note'];?>"><i class="glyphicon glyphicon-duplicate text-blue" aria-hidden="true"></i></a>

被调用的模态如下：

<!--delivery notes zoom Modal Start--> 
<div id="zoom" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="#zoom" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content" style="height:auto" style="width:auto">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Product Photo</h4>
        </div>
        <div class="modal-body">
        <div class="form-group">
            <img class="img-responsive" src="" id="prod_pic">  
        </div>
       </div>
        <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>      
        </div>

        </div><!--end of modal-dialog-->
 </div>
 <!--end of zoom modal-->

我的问题是模态被触发但没有显示图像。它是空白的。我在这里想念什么？

Answer 1

您好，欢迎来到Stack Overflow。

该图像为空白，因为您的src设置为空白，并且您未设置或修改它。

此外，href中也不需要#zoom。因此，您可以将锚标签修改为以下内容：

<a href="javascript:;" data-target="#zoom" data-toggle="modal" style="color:black;" class="small-box-footer" rel="../dist/delivery_notes/<?php echo $row['del_note'];?>" onclick="changeImage(this)"><i class="glyphicon glyphicon-duplicate text-blue" aria-hidden="true"></i></a>

然后添加以下JavaScript：

   <script>

function changeImage(elem){
document.getElementById("prod_pic").src = elem.rel;
    }

</script>

触发图像模态

1 个答案: