使用ACF Repeater字段实现Bootstrap三列图片网格 图片无法输出求助

问题排查与修复方案 #

核心错误 #

你代码中存在最明显的问题是ACF Repeater字段名前后不一致：
条件判断行用的是have_rows('image-grid')（横杠分隔命名），循环行用的是have_rows('image_grid')（下划线分隔命名），ACF字段名大小写、分隔符都必须和后台设置的完全匹配，直接把两处字段名统一为你后台实际设置的命名即可解决绝大多数无法输出的问题。

其他可选排查点 #

• 检查ACF后台「image」子字段的返回格式，必须设置为**数组（Array）**类型，你当前使用的$image['url']语法仅在返回格式为数组时生效：
  • 如果返回格式设置为ID，可改为$image_url = wp_get_attachment_image_url( get_sub_field('image'), 'full' );
  • 如果返回格式设置为URL，直接输出get_sub_field('image')即可
• 增加空值判断避免字段未填写时报PHP错误，同时输出alt属性提升SEO和可访问性
• 如果代码是写在自定义查询、小工具等非主循环上下文，需要给have_rows传入当前文章ID作为第二个参数，例如have_rows('image-grid', get_the_ID())

修正后的参考代码 #

<div class="container">
  <?php 
  // 这里的字段名替换为你后台实际的Repeater字段名，和后面循环保持一致
  if (have_rows('image_grid')): ?>
    <div class="row">
    <?php while ( have_rows('image_grid') ) : the_row();
      $image = get_sub_field('image');
      if($image): // 空值判断
      ?>
      <div class="col-lg-4">
        <img src="<?php echo esc_url($image['url']);?>" alt="<?php echo esc_attr($image['alt'] ?? '');?>" />
      </div>
      <?php endif; ?>
    <?php endwhile;?>
  </div>
  <?php endif; ?>
</div><!-- end container -->

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