Php 将HTML图片元素与ACF和Gutenberg一起使用

我用ACF pro创建了一个定制古腾堡积木。我有3个图像上传器“小、中、大”，我想使用html图片元素在较小的屏幕上显示“小图像”，而不加载其他大小的图像。图像显示在前端，但一旦我将它们添加到picture元素中，它们就不会显示，php命令之后的所有内容都会显示在前端

<div class="row">
        <picture>
            <source media="(max-width: 650px)" srcset="<?php wp_get_attachment_url( $small_image ); ?>" alt="Small">
            <source media="(max-width: 900px)" srcset="<?php wp_get_attachment_url( $medium_image ); ?>" alt="Medium">
            <source media="(max-width: 1790px)" srcset="<?php wp_get_attachment_url( $large_image ); ?>" alt="Large">
            <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
        </picture>
</div>

我想有3个单独的裁剪图像显示根据屏幕大小

<?php echo wp_get_attachment_image( $small_image, 'full' ); ?>


<source media="(max-width: 650px)" srcset="<?php wp_get_attachment_url( $small_image ); ?>" alt="Small">


<source media="(max-width: 650px)" srcset="<?php echo wp_get_attachment_url((int)get_post_meta($post->ID,'small_image',true)); ?>" alt="Small">

and 

<source media="(max-width: 650px)" srcset="<?php echo wp_get_attachment_id((int)get_post_meta($post->ID,'small_image',true)); ?>" alt="Small">

<?php
$small_image = get_field('small_image') ?: 295;
$medium_image = get_field('medium_image') ?: 295;
$large_image = get_field('large_image') ?: 295;

$text = get_field('testimonial') ?: 'Your testimonial here...';
?>

<section id="upload_image" class="py-5">
    <div class="container">


        <div class="row">
           <h3> Small Image </h3>
        <?php echo wp_get_attachment_image( $small_image, 'full' ); ?>
            <h3>Medium Image</h3>
        <?php echo wp_get_attachment_image( $medium_image, 'full' ); ?>
            <h3>Large Image</h3>
        <?php echo wp_get_attachment_image( $large_image, 'full' ); ?>
        </div> 


        <div class="row">
        <picture>
            <source media="(max-width: 650px)" srcset="<?php wp_get_attachment_url( $small_image ); ?>" alt="Small">
            <source media="(max-width: 900px)" srcset="<?php wp_get_attachment_url( $medium_image ); ?>" alt="Medium">
            <source media="(max-width: 1790px)" srcset="<?php wp_get_attachment_url( $large_image ); ?>" alt="Large">
            <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
        </picture>
        </div>

        <div class="row">
        <picture>
            <source media="(max-width: 650px)" srcset="<?php echo wp_get_attachment_url((int)get_post_meta($post->ID,'small_image',true)); ?>" alt="Small">
            <source media="(max-width: 900px)" srcset="<?php echo wp_get_attachment_url((int)get_post_meta($post->ID,'medium_image',true)); ?>" alt="Medium">
            <source media="(max-width: 1790px)" srcset="<?php echo wp_get_attachment_url((int)get_post_meta($post->ID,'small_image',true)); ?>" alt="Large">
            <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
        </picture>
        </div>



    </div>
</section>

add_action('acf/init', 'lil_define_block');
function lil_define_block() {

    // check function exists
    if( function_exists( 'acf_register_block' ) ) {

        // register a fun facts block
        acf_register_block(array(
            'name'              => 'responsive-image-uploader',
            'title'             => __( 'Responsive Image Uploader' ),
            'description'       => __('Upload images that display on different screensizes.'),
            'render_template'   => 'template-parts/blocks/image-uploader/image-uploader.php',
            'category'          => 'layout',
            'icon'              => 'nametag',
            'keywords'          => array( 'images', 'picture', 'responsive', 'acf' ),
        ));
    }
}