ACF PRO Repeater组件图片前端不显示问题求助

你的问题核心是PHP代码没有将获取到的图片URL和alt文本输出到HTML中。虽然get_sub_field()能正确获取图片数据，但它只是返回值，不会自动打印到页面，必须用echo指令输出内容。

修正后的代码如下：

<?php
if( have_rows('how_it_works_functions') ):
    $counter = 0;

    while( have_rows('how_it_works_functions') ) : the_row();

         $counter++;
        ?>

        <div class="step<?php echo $counter; ?>">
            <div class="row section-content">
                
                <?php if($counter == 2) { ?>

                    <div class="col-md-8 image">
                        <img class="skip-lazy" src="<?php echo get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php echo get_sub_field('how_it_works_functions_image')['alt']; ?>">
                    </div>
                    <div class="col-md-4 text">
                        <h3 data-aos="fade-left" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
                        <p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
                    </div>                                    

                <?php } else { ?>

                    <div class="col-md-4 text">
                        <h3 data-aos="fade-right" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
                        <p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
                    </div>
                    <div class="col-md-8 image">
                        <img class="skip-lazy" src="<?php echo get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php echo get_sub_field('how_it_works_functions_image')['alt']; ?>">
                    </div>

                <?php } ?>

            </div>
        </div>

        <?php
    endwhile;
endif;
?>

关键修改点： #

• 在get_sub_field()前添加echo，确保获取到的图片URL和alt文本被输出到对应的HTML属性中。
• 原代码中src="<?php get_sub_field(...); ?>"仅执行了数据获取操作，没有输出任何内容，导致src和alt属性为空，浏览器无法加载图片，最终显示断裂状态。

如果想让代码更清晰，也可以先把图片数据存入变量再使用：

<?php
if( have_rows('how_it_works_functions') ):
    $counter = 0;

    while( have_rows('how_it_works_functions') ) : the_row();
        $counter++;
        // 先将图片数据存入变量
        $function_image = get_sub_field('how_it_works_functions_image');
        ?>

        <div class="step<?php echo $counter; ?>">
            <div class="row section-content">
                
                <?php if($counter == 2) { ?>

                    <div class="col-md-8 image">
                        <img class="skip-lazy" src="<?php echo $function_image['url']; ?>" alt="<?php echo $function_image['alt']; ?>">
                    </div>
                    <div class="col-md-4 text">
                        <h3 data-aos="fade-left" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
                        <p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
                    </div>                                    

                <?php } else { ?>

                    <div class="col-md-4 text">
                        <h3 data-aos="fade-right" data-aos-offset="300" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_name'); ?></h3>
                        <p data-aos="fade-up" data-aos-offset="100" data-aos-duration="1000"><?php the_sub_field('how_it_works_functions_description'); ?></p>
                    </div>
                    <div class="col-md-8 image">
                        <img class="skip-lazy" src="<?php echo $function_image['url']; ?>" alt="<?php echo $function_image['alt']; ?>">
                    </div>

                <?php } ?>

            </div>
        </div>

        <?php
    endwhile;
endif;
?>

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