高级自定义字段字段图像不显示

问题描述：

我正在使用高级自定义字段与图库字段附加组件和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; 
}

答

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

但你与你的隐藏它：

#post-img a { 
    display:none; 
}

这只是告诉每的＃-IMG后一个里面，它应该不会显示。由于你的img是在一个内部的，所以没有显示。

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

让我知道如果这能帮助你。

谢谢，我添加了代码，因为我只想显示一个缩略图，但后来我忘了在它后面添加'＃post-img a：first-child {display：block;}'。现在它可以工作。 –

答

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

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

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

高级自定义字段字段图像不显示

相关推荐