使用ACF免费版实现WordPress动态hero头图前端显示破损怎么办

核心原因排查（90%的新手问题出在这里） #

ACF免费版图片字段支持三种返回值格式，你的前端输出代码必须和后台字段配置的返回格式完全匹配才能正常加载：

• 图片URL：直接返回图片的完整访问地址
• 图片ID：返回图片在WordPress媒体库的唯一ID
• 图片数组：返回包含图片URL、alt文本、尺寸等全量信息的关联数组

各返回格式对应正确代码 #

1. 返回格式为「图片URL」时的代码 #

<?php if (get_field('hero_banner')) : // 把hero_banner换成你自己设置的字段名 ?>
  <div class="hero">
    <img src="<?php echo esc_url(get_field('hero_banner')); ?>" alt="页面头图">
  </div>
<?php endif; ?>

2. 返回格式为「图片ID」时的代码 #

<?php 
$hero_img_id = get_field('hero_banner');
if ($hero_img_id) : 
  // 第二个参数可替换为你需要的图片尺寸，例如'thumbnail'、'medium'、自定义尺寸名
  $hero_img_url = wp_get_attachment_image_url($hero_img_id, 'full');
?>
  <div class="hero">
    <img src="<?php echo esc_url($hero_img_url); ?>" alt="页面头图">
  </div>
<?php endif; ?>

3. 返回格式为「图片数组」时的代码 #

<?php 
$hero_img = get_field('hero_banner');
if ($hero_img) : ?>
  <div class="hero">
    <img src="<?php echo esc_url($hero_img['url']); ?>" alt="<?php echo esc_attr($hero_img['alt']); ?>">
  </div>
<?php endif; ?>

其他常规排查项 #

• 确认后台对应页面的ACF字段已经上传图片并保存发布，修改后先清除站点缓存、浏览器缓存再测试前端效果
• 右键点击前端破损图片，选择「复制图片地址」，和媒体库中对应图片的实际访问地址做对比，确认路径是否一致
• 确认代码写在了对应页面的模板文件中，避免放错模板导致字段读取不到值

内容的提问来源于stack exchange，提问作者CharpLoop