无法在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标记。

我建议更改设置中的字段以返回ID，然后使用WordPress函数输出图像标记，而不是在标记中使用url。这样你就可以很容易地使用缩略图大小，并且WP会为你处理一个响应式的资源集。

来自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页面中。

尝试将其放在src属性处的Image标记中，如下所示：

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

这将在source属性中呈现您的URL并正确加载您的图像。

img标签引用：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img