Не могу отобразить изображение в WordPress

Question

Я пытаюсь добавить изображения в столбцы, используя Расширенные пользовательские поля, но изображения не отображаются.Но он отображает URL изображений.

<div class="container">
    <?php if( have_rows('columns-1-services') ): ?>
    <div class="row">
        <?php while(have_rows('columns-1-services')):the_row(); {
            $image_1 = get_sub_field("images-1");
            $image_2 = get_sub_field("images-2");
            $image_3 = get_sub_field("images-3");
            $image_4 = get_sub_field("images-4");
        } ?>
        <div class="col-md-3 services"><?php echo "$image_1"; ?></div>
        <div class="col-md-3 services"><?php echo "$image_2"; ?></div>
        <div class="col-md-3 services"><?php echo "$image_3"; ?></div>
        <div class="col-md-3 services"><?php echo "$image_4"; ?></div>
        <?php endwhile; ?>
    </div>  
    <?php
        else :
        // no rows found
        endif;?>

</div>

Answer 1

Как сказал LucasNesk, функция get_sub_field("image") возвращает URL-адрес, а не полный тег img.

Вместо того, чтобы использовать URL-адрес в теге, я бы рекомендовал изменить поле в настройках, чтобы вернуть идентификатор, а затем использовать функции WordPress для вывода тега изображения. Таким образом, вы можете легко использовать размер миниатюры, а WP обрабатывает отзывчивый srcset для вас.

С https://www.advancedcustomfields.com/resources/image/#template-usage

<?php 

$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)

if( $image ) {

    echo wp_get_attachment_image( $image, $size );

}

?>

Answer 2

Это происходит потому, что вы отображаете URL-адрес изображения непосредственно на HTML-странице.

Попробуйте поместить его в тег Image в атрибуте src, например:

<div class="col-md-3 services">
    <img src="<?php echo $image_1; ?>">
</div>

Это отобразит ваш URL в атрибуте источника и правильно загрузит ваше изображение.

Ссылки на тег img: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img