如何从PHP变量中提取Woocommerce商品图片的URL？

我现在有一个PHP变量用来获取WooCommerce商品图片，测试可用的代码如下：

if( $product instanceof WC_Product ){
  $order_img = $product->get_image( 'full' );
} 

当我echo $order_img时，变量返回完整的img标签：

<img width="900" height="1200" src="https://mywebsite.it/.../.../image.jpg" class="attachment-full size-full" alt="" loading="lazy">

我尝试把这张图片作为div的背景图，写法如下：

style='background-image: url("<?php echo wp_kses_post($order_img) ?>");'

但生成了错误的HTML样式：

style='background-image: url("<img width="900" height="1200" src="https://mywebsite.it/.../.../image.jpg" class="attachment-full size-full" alt="" loading="lazy">");'

我想要的正确样式是：

style='background-image: url("https://mywebsite.it/.../.../image.jpg");'

请问如何从该变量中仅提取图片的URL链接？

方法1：直接获取商品图片URL（推荐） #

WooCommerce的WC_Product类提供了直接获取图片URL的方式，无需先生成完整img标签再提取。步骤如下：

1. 通过get_image_id()获取商品主图的附件ID
2. 用wp_get_attachment_image_url()传入ID和尺寸，得到对应URL

代码示例：

if( $product instanceof WC_Product ){
  $image_id = $product->get_image_id();
  // 获取full尺寸的图片URL
  $order_img_url = wp_get_attachment_image_url( $image_id, 'full' );
}

之后直接将URL用于背景图样式，记得用esc_url()做转义处理：

style='background-image: url("<?php echo esc_url($order_img_url) ?>");'

这种方式更高效可靠，不会因为img标签结构变化导致提取失败。

方法2：从已有的img标签中提取URL #

如果必须保留原有$order_img变量（包含完整img标签），可以用PHP的DOM解析来提取src属性：

if( $product instanceof WC_Product ){
  $order_img = $product->get_image( 'full' );
  
  $dom = new DOMDocument();
  // 忽略HTML解析过程中的非致命错误
  @$dom->loadHTML($order_img);
  $img_element = $dom->getElementsByTagName('img')->item(0);
  
  if($img_element){
    $order_img_url = $img_element->getAttribute('src');
  }
}

同样用esc_url()转义后输出到样式中即可。

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