系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在 Magento 2 中，ImagePreview 组件用于在前端显示一个预览图片的组件。这个组件可以让用户在上传图片之前预览图片，并可以删除已上传的图片。
下面是一个示例，展示了如何在 Magento 2 中使用 ImagePreview 组件。假设你已经创建了一个产品，并且已经上传了一些图片。
首先，我们需要创建一个用于显示预览图片的 ImagePreview 组件。创建一个新的 UI 组件文件 image_preview.xml，并将以下代码添加到其中：
<container name="image_preview_container" htmlTag="div">
<foreach args="data: currentProduct().images, as: 'image'" render="true" >
<block class="Magento\Framework\View\Element\Template" template="Magento_Catalog::product/helper/gallery.phtml">
<arguments>
<argument name="data" xsi:type="array">
<item name="image" xsi:type="string">${image.url}</item>
<item name="width" xsi:type="number">100</item>
<item name="height" xsi:type="number">100</item>
<item name="label" xsi:type="string">${image.label}</item>
<item name="deleteUrl" xsi:type="url" path="catalog/product_gallery/delete"/>
<item name="scope" xsi:type="string">product</item>
<item name="position" xsi:type="number">${image.position}</item>
</argument>
</arguments>
</block>
</foreach>
</container>在这个组件的代码中，我们使用了一个 foreach 循环来遍历产品的图片列表。对于每张图片，我们创建了一个新的 Magento\Framework\View\Element\Template 块，并将图片的相关信息作为参数传递给它。
在这个块中，我们使用了 Magento_Catalog::product/helper/gallery.phtml 模板来显示图片。这个模板将显示图片的预览图，并提供了一个 "删除" 按钮，以便用户可以删除已上传的图片。
最后，我们需要将这个 ImagePreview 组件添加到产品页面中。在你的产品布局文件中，添加以下代码：
<referenceBlock name="product.info.media"> <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::image_preview.phtml"/> </referenceBlock>
在这个代码片段中，我们将 Magento\Framework\View\Element\Template 块添加到了名为 "product.info.media" 的布局块中。这个布局块包含了产品页面中显示图片的相关组件，例如产品主图、缩略图、相册等等。