Magento 2：如何在购物车成功提示中添加商品图片标签

问题原因 #

你遇到的img标签消失问题，核心有两个：

1. escapeHtml 方法默认仅允许 <a> 标签，<img> 不在白名单内，会被自动转义为纯文本
2. 硬编码的 productImageUrl 无法获取真实商品图片地址，同时模板可能未拿到商品对象用于生成图片链接

解决方案步骤 #

1. 重写Block传递商品对象（如果模板未获取到商品实例） #

默认的 AddCartSuccessMessage Block仅传递了商品名称和购物车URL，需要通过插件把当前加购的商品对象传递到模板：

步骤1.1 创建插件类

在自定义模块中创建文件 Vendor/Module/Plugin/Block/Cart/AddCartSuccessMessage.php：

<?php
namespace Vendor\Module\Plugin\Block\Cart;

use Magento\Checkout\Block\Cart\AddCartSuccessMessage as OriginalBlock;
use Magento\Framework\App\RequestInterface;
use Magento\Catalog\Model\ProductRepository;
use Magento\Framework\Exception\NoSuchEntityException;

class AddCartSuccessMessage
{
    protected RequestInterface $request;
    protected ProductRepository $productRepository;

    public function __construct(
        RequestInterface $request,
        ProductRepository $productRepository
    ) {
        $this->request = $request;
        $this->productRepository = $productRepository;
    }

    public function beforeToHtml(OriginalBlock $block): void
    {
        $productId = $this->request->getParam('product');
        if ($productId) {
            try {
                $product = $this->productRepository->getById($productId);
                $block->setData('product', $product);
            } catch (NoSuchEntityException $e) {
                // 商品不存在时的异常处理
            }
        }
    }
}

步骤1.2 注册插件

在模块的 etc/di.xml 中添加配置：

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Block\Cart\AddCartSuccessMessage">
        <plugin name="vendor_module_pass_product_to_success_message" type="Vendor\Module\Plugin\Block\Cart\AddCartSuccessMessage"/>
    </type>
</config>

2. 修改重写的 addCartSuccessMessage.phtml 文件 #

更新模板代码，动态获取商品图片URL，并允许 <img> 标签在转义白名单内：

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Framework\View\Element\Template $block */
/** @var \Magento\Catalog\Model\Product $product */
$product = $block->getData('product');
$imageHelper = $this->helper(\Magento\Catalog\Helper\Image::class);
$imageUrl = $product ? $imageHelper->init($product, 'product_base_image')->getUrl() : '';
?>
<div class="add-cart-success-message">
    <?php if ($imageUrl): ?>
        <img 
            src="<?= $block->escapeUrl($imageUrl) ?>" 
            alt="<?= $block->escapeHtmlAttr($product->getName()) ?>" 
            class="cart-success-product-image"
        />
    <?php endif; ?>
    <?= $block->escapeHtml(
        __('You added %1 to your <a href="%2">shopping cart</a>.', $block->getData('product_name'), $block->getData('cart_url')),
        ['a', 'img'] // 新增允许img标签
    ); ?>
</div>

3. 添加CSS样式优化显示 #

在自定义模块的CSS文件中添加样式，调整图片大小和排版：

.cart-success-product-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 12px;
    border-radius: 4px;
}

4. 清理缓存 #

执行以下命令确保修改生效：

php bin/magento cache:clean
php bin/magento cache:flush

关键说明 #

• 使用 escapeUrl 处理图片地址、escapeHtmlAttr 处理图片alt属性，避免XSS风险
• 扩展 escapeHtml 的允许标签数组，确保 <img> 不被转义
• 通过商品对象动态获取图片URL，保证地址的正确性和实时性

内容的提问来源于stack exchange，提问作者Damià