高级自定义字段库字段图像未显示

Question

我正在使用带有图库字段附加组件和花式框的高级自定义字段。如果观看者单击缩略图，应该会弹出一个花式框幻灯片。问题是，缩略图没有显示。当我检查元素时，由于某种原因，img 大小0x0。

这是我的代码：

 <div id="post-img">    
        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
         <?php foreach( $images as $image ): ?>
        <a href="<?php echo $image['url']; ?>" rel="fancybox">  
            <h5>view images</h5><img src="<?php echo $image_1['url']; ?>"/>
        </a>
        <?php endforeach; ?>
    </div><!-- #post-img -->

.CSS：

#post-img {
float:left;
margin-bottom:0;
padding-top:10px;
padding-bottom:0;
}
#post-img a {
display:none;
}
#post-img img {
display:none;
width:200px;
height:auto;
}
#post-img a:first-of-type img{
display:block;
}

Answer 1

首先：您正确地使用了PHP和ACF，并且应该填充缩略图。

但是你用你的隐藏它：

#post-img a {
    display:none;
}

这只是告诉 #post-img内部的每一个，它不应该被显示。由于您的 img 在 a 内部，因此不会显示。

JSFiddle，我更改了 display：none; to display：block; 用于说明目的。

让我知道这是否对您有帮助。

Answer 2

首先，您应该检查img.src是否正在填充？

如果是，那你为什么不尝试向 img 元素添加height和width属性呢？

<img src="<?php echo $image_1['url']; ?>" width="200" height="200" />