使用Laravel&；在模态中显示特定阵列图像；jQuery AJAX

我需要显示阵列图像中的特定图像，但我不能这样做。低于我尝试过的

阵列图像

控制器

public function edit($id)
{
    $product = \App\Product::find($id);

    $picts = [];
    foreach (json_decode($product->product_photo) as $picture) {
        $picts[] = $picture->path;
    }

    $pix = [];
    for ($i = 0; $i < count($picts); $i++) {
        $pix[$i] =
            '<input type="hidden" name="photo_id" id="photo_id' . $i . '">
            <div class="array-images-forEdit" style="position:relative;float:left;margin-right:5px;"><button type="submit" style="position:absolute;top:0;left:0;top:2px;left:5px;margin-left:80px;" class="close-forEdit" aria-label="Close"><span>&times;</span></button><a href="javascript:void(0)" data-toggle="tooltip"  data-id="' . $product->id . '"  data-filter="/reference/eureka/storage/app/' . $picts[$i] . '" data-original-title="Edit" class="showModalPhoto" id="showModalPhoto"><img id="myImage" src="/reference/eureka/storage/app/' . $picts[$i] . '" style="height:120px;width:105px;margin-bottom:10px;top:0;right:0;"/></a></div>
            ';
    }
    $pix = implode(' ', $pix);

    $html =
        '
    <div class="row">
    <div class="col-md-12">
    ' . $pix . '
    </div>
    </div> <!-- row-->';

    return response()->json(['html' => $html, 'product' => $product->category]);
}

 public function showPhoto($id)
    {
    $product = \App\Product::find($id);
    $picts = [];
    foreach (json_decode($product->product_photo) as $picture) {
        $picts[] = $picture->path;
    }

    $html = [];
    for ($i = 0; $i < count($picts); $i++) {
        $html[$i] =
            '<div class="row">
        <div class="col-md-4">
        <img src="/reference/eureka/storage/app/' . $picts[$i] . '" style="height:500px;width:465px;margin-bottom:10px;top:0;right:0;"/>
        </div>
     </div>';
    }

    return response()->json(['html' => $html]);
} 

模态视图

---

在您的

预览

页面中，您已经显示了所有图像，因此，您无需再次进行ajax调用，只需获取

img

的

src

标记，并在单击

a.showModalPhoto

标记时显示内部模式

演示代码：

//更改为类选择器
$（'body'）。在（'click'，'showModalPhoto'，函数（e）{
e、 预防默认值（）；
$（'.alert danger'）.html（''）；
$（'.alert danger'）.hide（）；
//获取图像的src
src=$（this.find（'img'）.attr（'src'）；
//把它加进去
$（'#dataPhotoElement'）.html(`
`);
$（'#modelHeading'）.html（“显示照片”）；
$（'ajaxModelForPhoto'）.modal（'show'）；//show modal
});

&时代；
&时代；
&时代；
模态头
模态中的一些文本

接近
Hi，您已经在图像标签内以及数据过滤器中设置了图像路径

？为什么不简单地获取该值并在modal中显示它呢？嗨，很高兴再次见到你。为你的回应感到高兴。我一直在想。但是，仍然。。。我不知道，我该怎么办？哇。。。就这么简单。我真蠢。这种方式在我脑子里是不会发生的。

$('body').on('click', '#showModalPhoto', function(e) { // .editUser exist in usercontroller.php

        e.preventDefault();
        $('.alert-danger').html('');
        $('.alert-danger').hide();

        id = $(this).data('id');

        $.ajax({
            url: "product/" + id + "/show-photo",
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                $('#dataPhotoElement').html(data.html);

                $('#photo_id').val('');
                $('#productForm').trigger("reset");
                $('#modelHeading').html("Show Photo");
                $('#ajaxModelForPhoto').modal('show');
            }
        });
    });