Laravel 5.2中使用javascript的模态视图中的动态图像

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

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

以下是脚本：

//获取模态
var modal=document.getElementById（'myModal'）；
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById（'myImg'）；
var modalImg=document.getElementById（“img”）；
var captionText=document.getElementById（“caption”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击（x）时，关闭模式对话框
span.onclick=function（）{
modal.style.display=“无”；
}

@foreach（$properties->files as$file）
name）}“alt=“{{$file->name}}”width=“300”height=“200”>
&时代；
@endforeach

它只显示第一个图像，因为您的

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) }}" alt="{{ $file->name }}" width="300" height="200" onclick="showImage(this,<?php echo $index ?>)">
    </a>
</div>
@endforeach

---

同样，您可以设置关闭模式逻辑。我希望这对您有所帮助。

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

showImage（）

。请立即尝试。如果您的控制器中仍然存在相同的错误，请交叉检查

$properties

值。我应用了更改，没有显示图像，也没有显示相同的消息。然后，您的代码中出现了一些问题……您能否发布错误截图。感谢您的帮助，昨晚我没有找到错误，但我没有找到我已经解决了这个问题，问题是如何在视图中放置变量属性。

<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>