Repeater 中的 ACF PRO 圖像未顯示

Question

圖像未顯示在前端。 ACF 設置截圖

            <?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 get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php 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 get_sub_field('how_it_works_functions_image')['url']; ?>" alt="<?php get_sub_field('how_it_works_functions_image')['alt']; ?>">
                                    </div>

                                <?php } ?>

                            </div>
                        </div>

                        <?php
                    endwhile;
                endif;
            ?>

我已經檢查了 var_dump，它得到了正確的 url，但我的前端圖像仍然損壞。

Answer 1

您需要回顯該字段。

根據您的代碼，像這樣：

<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']; ?>">

替代有效方法：

<?php
    $image = get_sub_field( 'how_it_works_functions_image' );
?>
<img class="skip-lazy" src="<?php echo esc_attr( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>">

試試上面的解決方案，讓我知道它是否有效。