Javascript 如何循环多个图像并在图像上带水印的不同分区中显示它们？

我试图在一个名为center的div中循环多个图像，该图像应该位于带水印的div中

这是我在div中心循环图像时的代码：

@foreach($data as $key)

    <div id="center">
        $image_file = $key->album['0']->image;
    </div>

@endforeach

var image_file = '<?php echo asset($image_file) ?>';
                                watermark([image_file, 'http://localhost:8080/uploads/product/watermark.jpg'])
                                    .image(watermark.image.center(0.5))
                                    .then(function (img) {
                                        document.getElementById("center").appendChild(img);
                                    });

@foreach（$data作为$key）
$image\u file=$key->album['0']->image；
@endforeach

在要显示在div中心的图像上插入水印时的代码：

@foreach($data as $key)

    <div id="center">
        $image_file = $key->album['0']->image;
    </div>

@endforeach

var image_file = '<?php echo asset($image_file) ?>';
                                watermark([image_file, 'http://localhost:8080/uploads/product/watermark.jpg'])
                                    .image(watermark.image.center(0.5))
                                    .then(function (img) {
                                        document.getElementById("center").appendChild(img);
                                    });

var-image\u文件=“”；
水印（[image_文件，'http://localhost:8080/uploads/product/watermark.jpg'])
.图像（水印.图像.中心（0.5））
.然后（功能（img）{
document.getElementById（“中心”）.appendChild（img）；
});

但是当我这样做时，所有的图像都在同一个divcenter，而不是多个centerdiv中的多个图像

下面是一个屏幕截图，它是如何显示的，而不是如何显示的

应如何显示（图片及其各自的细节）

---

任何帮助都将不胜感激。谢谢

您正在为多次渲染的a div提供相同的id、生成动态id或使用classI。我试图使用一个类，但它也不起作用！做一个ajax调用，使用jquery/javascript@fatman循环我生成了一个动态id，它成功了，谢谢你的帮助！