WooCommerce中img标签无法显示Base64图片的问题解决

我在子主题中重写了wc_display_item_meta函数，用于在产品下方以列表形式展示产品元数据，但遇到了Base64图片无法正常显示的问题。

初始代码及问题分析 #

初始代码尝试处理名为「Tie Preview」的元数据，提取Base64内容并展示图片，但图片无法加载：

function wc_display_item_meta( $item, $args = array() ) {
    $strings = array();
    $html    = '';
    $args    = wp_parse_args(
        $args,
        array(
            'before'       => '<ul class="wc-item-meta"><li>',
            'after'        => '</li></ul>',
            'separator'    => '</li><li>',
            'echo'         => true,
            'autop'        => false,
            'label_before' => '<strong class="wc-item-meta-label">',
            'label_after'  => ':</strong> ',
        )
    );

    foreach ( $item->get_all_formatted_meta_data() as $meta_id => $meta ) {
        $value     = $args['autop'] ? wp_kses_post( $meta->display_value ) : wp_kses_post( make_clickable( trim( $meta->display_value ) ) );
        $key = wp_kses_post( $meta->display_key );
        if($key === "Tie Preview"){
            
            $b64 = explode(',', $value);
            $image = base64_decode($b64[1]);
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . '<img src="data:image/png;base64,' . $image . '" />';
        }else{
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . $value;    
        }

    }

    if ( $strings ) {
        $html = $args['before'] . implode( $args['separator'], $strings ) . $args['after'];
    }

    $html = apply_filters( 'woocommerce_display_item_meta', $html, $item, $args );

    if ( $args['echo'] ) {
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo $html;
    } else {
        return $html;
    }
}

问题出在两点：

• 错误调用了base64_decode()：img标签的src需要的是原始的Base64编码字符串，而不是解码后的二进制数据，这直接导致图片资源无效。
• 元数据值被自动添加了<p>标签：替换为a标签测试时发现，Base64字符串前后被包裹了<p>标签，进一步破坏了URL的有效性。

修改后的解决方案 #

针对上述问题，调整代码如下：去掉不必要的base64解码操作，用substr()移除首尾的<p>标签，直接使用清理后的Base64字符串作为图片源和链接地址：

function wc_display_item_meta( $item, $args = array() ) {
    $strings = array();
    $html    = '';
    $args    = wp_parse_args(
        $args,
        array(
            'before'       => '<ul class="wc-item-meta"><li>',
            'after'        => '</li></ul>',
            'separator'    => '</li><li>',
            'echo'         => true,
            'autop'        => false,
            'label_before' => '<strong class="wc-item-meta-label">',
            'label_after'  => ':</strong> ',
        )
    );

    foreach ( $item->get_all_formatted_meta_data() as $meta_id => $meta ) {
        $value     = $args['autop'] ? wp_kses_post( $meta->display_value ) : wp_kses_post( make_clickable( trim( $meta->display_value ) ) );
        $key = wp_kses_post( $meta->display_key );
        if($key === "Tie Preview"){
            $sub1 = substr($value, 3);
            $sub2 = substr($sub1, 0, -4);
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . '<img src="' . $sub2 . '" />' . "<a href='" . $sub2 . "' >click here</a>";
        }else{
            $strings[] = $args['label_before'] . wp_kses_post( $meta->display_key ) . $args['label_after'] . $value;    
        }

    }

    if ( $strings ) {
        $html = $args['before'] . implode( $args['separator'], $strings ) . $args['after'];
    }

    $html = apply_filters( 'woocommerce_display_item_meta', $html, $item, $args );

    if ( $args['echo'] ) {
        // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        echo $html;
    } else {
        return $html;
    }
}

修改后，img标签能正确加载Base64图片，同时保留了点击查看原图的链接功能。

内容的提问来源于stack exchange，提问作者Andrew Mason