ACF PRO Image in Repeater not showing

Question

The images are not showing in front-end. ACF settings screenshot

            <?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;
            ?>

I already check the var_dump and it is getting the correct url but I still have broken image in front-end.

Answer 1

You need to echo that field.

Like this based on your code:

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

Alternative effective way:

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

Try out the above solution and let me know if it works or not.