WordPress archive-shop.php加载BDroppy图片显示src(unknown)问题修复

两个模板的图片加载逻辑不一致是故障核心原因：

• 商品详情页content-single-product使用的$images_url数组已经经过BDroppy插件过滤，直接返回外链CDN地址，没有调用WordPress本地媒体库查询函数，因此可以正常加载。
• 商品列表页archive-shop.php使用的get_the_post_thumbnail_url()、wp_get_attachment_url()均为WordPress原生本地媒体库查询函数，只会读取存储在本地媒体库的附件资源。BDroppy同步的商品图片默认不会下载到本地服务器，仅在数据库中保存外链ID映射关系，这两个函数无法读取到有效地址，返回布尔值false，最终前端渲染时img标签的src属性就会显示为unknown。
• 列表页宽图模块存在代码逻辑错误，直接将ACF字段返回的图片ID作为src属性值输出，没有做地址转换，必然无法加载。

1. 替换列表页主图/hover图获取逻辑，兼容BDroppy外链 #

不要直接调用原生媒体库函数取图，优先走WooCommerce官方产品图片接口（BDroppy已经对该接口做了外链替换钩子，不会强制查询本地媒体库），同时增加兜底逻辑读取BDroppy存在数据库中的外链地址。
将原模板中图片初始化部分的代码替换为以下内容：

foreach($unique_variations_ids as $vproduct_id):
  $vproduct = wc_get_product($vproduct_id);
  $images_url = [];
  // 走WooCommerce官方产品主图接口，自动兼容BDroppy外链映射
  $imageId = $vproduct->get_image_id();
  $imageUrl = wp_get_attachment_image_url($imageId, 'woocommerce_thumbnail');
  // 兜底：接口返回空时直接读取BDroppy存储的外链地址
  if(!$imageUrl){
    $imageUrl = get_post_meta($vproduct_id, '_bdroppy_image_url', true);
  }
  array_push($images_url, $imageUrl);

  // 处理商品附加图集，兼容外链ID
  $attachment_ids = array_filter( array_map('intval', explode( ',', get_post_meta( $vproduct_id, '_wc_additional_variation_images', true ) ) ) );
  foreach ($attachment_ids as $attachment_id) {
    $image_url = wp_get_attachment_image_url($attachment_id, 'woocommerce_thumbnail');
    // 兜底：本地接口查不到时读取BDroppy外链meta
    if(!$image_url){
      $image_url = get_post_meta($attachment_id, '_bdroppy_attachment_url', true);
    }
    array_push($images_url, $image_url);
  }
  // 修复hover图不存在时的数组越界问题
  $imageUrlHover = !empty($images_url[1]) ? $images_url[1] : $images_url[0];
  $column_width = 'normal';
  
  if(empty($_GET['orderby'])){
    $wide_variation_id = get_field('wide_variation_id', $parent_id);
      if($wide_variation_id == $vproduct_id){
        $column_width = strtolower(get_field('column_width', $parent_id));
      }                                     
  }
                                    
  $column_class = $column_width;
?>

2. 修复宽图模块的输出错误 #

原代码直接输出图片ID的逻辑完全错误，替换为兼容本地/外链图片的地址转换逻辑：

<?php if($column_width == 'wide' && empty($_GET['orderby'])){ ?>
  <div class="product-thumbnail landscape" data-product-id="<?php echo $vproduct_id; ?>">
  <?php 
    $wide_images = get_field('wide_gallery');
    $size = 'full'; 
    if( $wide_images ):
      foreach( $wide_images as $wide_image_item ):
        // 兼容ACF返回数组/ID两种格式，同时兼容BDroppy外链
        if(is_array($wide_image_item)){
          $wide_img_url = $wide_image_item['url'];
        }else{
          $wide_img_url = wp_get_attachment_image_url(intval($wide_image_item), $size);
          if(!$wide_img_url){
            $wide_img_url = get_post_meta(intval($wide_image_item), '_bdroppy_attachment_url', true);
          }
        }
        echo '<a href="' . $permalink . '"><img src="' .esc_url($wide_img_url). '"></a>';
      endforeach;
    endif;
  ?>
  </div>
<?php } ?>

3. BDroppy插件配置校准 #

完成代码修改后，按以下步骤检查插件配置：

• 进入WordPress后台 → BDroppy插件设置页，找到图片加载模式选项，选择「直接使用外链CDN地址，不下载到本地媒体库」（如果已经选中则无需修改）
• 找到WooCommerce钩子注入分类，开启「产品列表页图片地址替换」开关，保存设置
• 清除站点页面缓存、对象缓存，硬刷新商品列表页即可看到图片正常加载

• 禁止直接使用wp_get_attachment_url()获取BDroppy同步的图片，该函数不会经过WooCommerce产品图片过滤钩子，无法识别插件的外链映射关系
• 所有输出到前端的图片地址建议加上esc_url()做安全转义，避免地址中存在特殊字符导致渲染异常
• 升级BDroppy插件后如果再次出现同类问题，可检查插件存储外链的meta key是否有调整，当前主流版本使用的key为_bdroppy_image_url、_bdroppy_attachment_url

内容的提问来源于stack exchange，提问作者Cătălin Donțu