Question

我尝试使用“高级自定义字段”将图像添加到列中，但是图像不显示。但是它会显示图像的网址。

<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

发生这种情况是因为您将图像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

Answer 2

正如LucasNesk所说，get_sub_field("image")函数返回的是URL，而不是完整的img标签。

我建议不要更改标签中的url，而建议更改设置中的字段以返回ID，然后使用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 );

}

?>

无法在Wordpress中显示图像

2 个答案: