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

【问题标题】：Advanced Custom Fields Gallery Field Image Not Showing高级自定义字段库字段图像未显示
【发布时间】：2014-03-23 19:28:36
【问题描述】：

我正在使用带有 Gallery Field 插件和 Fancybox 的高级自定义字段。如果观众点击缩略图，Fancybox 幻灯片应该会弹出。问题是，缩略图没有显示出来。当我检查元素时，由于某种原因，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;
}

【问题讨论】：

标签： css advanced-custom-fields

【解决方案1】：

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

但你用你的：

#post-img a {
    display:none;
}

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

JSFiddle where I changed display:none; to display:block; for illustrative purposes.

如果这对你有帮助，请告诉我。

【讨论】：

谢谢，我添加了该代码，因为我只想显示一个缩略图，但后来我忘记在其后添加“#post-img a:first-child {display:block;}”。现在可以了。

【解决方案2】：

首先你应该检查 img.src 是否被填充？

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

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

【讨论】：