如何循环多个图像并将它们显示在图像上带有水印的不同div中？

Question

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

在div center 中循环播放图像时的代码：

@foreach($data as $key)

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

@endforeach

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

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);
                                    });

但是当我这样做时，所有图像都来自同一个div center ，而不是多个中心 div中的多个图像

以下是如何显示与如何显示

的屏幕截图

应该如何显示（图片及其各自的详细信息）

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