Magento：如何按图像角色显示产品图像

Question

我想弄清楚如何通过产品图像在 Magento_Catalog/templates/product/image_with_borders.phtml 中的角色来显示产品图像

我的商店页面上的每个产品都有三张图片，每张图片都有自己的图片角色（基本、预览、悬停）。

这是我的产品目前的样子：

这是我的 image_with_borders.phtml 文件：

<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>

<img
    src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
    alt="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>"
    class="main"
    max-width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
    max-height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"
/>

<img src="" alt="" class="preview">

<img src="" alt="" class="hover">

如何在此文件中请求具有角色、基础、预览和悬停的图像？

Answer 1

如果您已经确定了要修改的文件，则可以根据其角色使用 js 或knockout js 来更改图像。 例如带有悬停作用的图片，你可以使用带有悬停事件的js，当用户鼠标悬停时你可以处理改变图像。