Laravel 5.2 中带有 javascript 的模态视图中的动态图像

Posted 2023-02-24

【中文标题】Laravel 5.2 中带有 javascript 的模态视图中的动态图像

【英文标题】：Dynamic image in modal view with javascript in Laravel 5.2

【发布时间】：2017-05-28 07:58:59

【问题描述】：

我需要一些建议来动态显示图像。

我目前正在使用 W3Schools 示例中的此脚本：

http://www.w3schools.com/howto/howto_css_modal_images.asp

这是脚本：

<script>
        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the image and insert it inside the modal - use its "alt" text as a caption
        var img = document.getElementById('myImg');
        var modalImg = document.getElementById("img");
        var captionText = document.getElementById("caption");
        img.onclick = function()
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerhtml = this.alt;
        

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks on <span> (x), close the modal
        span.onclick = function()  
          modal.style.display = "none";
        
    </script>

@foreach($properties->files as $file) 
    
    <div class="col-md-6 thumb">
        <a class="thumbnail">
            <img id="myImg" src=" URL::asset('uploads/products/' . $file->name) "   >
        </a>
    </div>

    <div id="myModal" class="modal">

        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

        <img class="modal-content" id="img">
        
        <div id="caption"></div>
    </div>

@endforeach

我需要在缩略图中显示动态显示的图像，因为只显示列表中的第一张图像。

在视图中，图像显示如下：

第一个图像显示在模态视图中，但第二个没有：

这是我在 Propertycontroller 中的 show 方法：

Public function show ($ id)
     
         $ Properties = Property :: find ($ id);
        
         $ Files = File :: where ('property_id', $ properties-> id) -> get ();
        
         Return view ('properties.show', compact ('properties', 'files'));
     

此要求与：

Show image file by id in Laravel 5.2

单击图像时如何在模态视图中显示图像？

【参考方案1】：

它只显示第一张图片，因为您的id 对于所有图片都是相同的。使用for 循环索引为img 标签提供唯一ID，如下所示：

@foreach($properties->files as $index=>$file) 

<div class="col-md-6 thumb">
    <a class="thumbnail">
        <img id="myImg<?php echo $index ?>" src=" URL::asset('uploads/products/' . $file->name) "    onclick="showImage(this,<?php echo $index ?>)">
    </a>
</div>
@endforeach

showImage() 函数会将唯一的$index 传递给您的脚本并执行此操作。

<script>
     function showImage(element,i)
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('myImg'+i);
    var modalImg = document.getElementById("img");
    var captionText = document.getElementById("caption");
        modal.style.display = "block";
        modalImg.src = element.src;
        captionText.innerHTML = element.alt;
   
</script>

同样你可以设置关闭模态逻辑。希望对您有所帮助。

【讨论】：

非常感谢您的回复，我采纳了您的建议，但返回以下错误消息：加载资源失败：服务器响应状态为 500（内部服务器错误）

我修改了showImage()。现在就试试。如果您仍然在控制器中得到相同的错误交叉检查$properties 值。

我应用了更改，但没有显示图像并显示相同的消息。

那你的代码有问题……你能发个错误截图吗？

感谢您的帮助，昨晚我没有发现错误，但我已经解决了，问题是我如何在视图中放置变量属性。