WordPress主题index.php引用图片无法显示的解决方法求助

你的问题核心是相对路径的使用不符合WordPress的动态路径规则——直接写imgbanner-image-1.png（看起来你可能漏了斜杠，应该是img/banner-image-1.png？）会让浏览器从当前页面URL的根目录去查找图片，而不是从主题的img目录里找。比如首页是https://yourdomain.com/，浏览器会请求https://yourdomain.com/imgbanner-image-1.png，但你的实际图片存在https://yourdomain.com/wp-content/themes/your-theme-name/img/banner-image-1.png，所以肯定找不到。

正确的引用方法 #

WordPress提供了专门的函数来获取主题目录的绝对URL，确保路径始终正确：

1. 父主题场景：使用 get_template_directory_uri()

把你的图片引用代码改成这样：

<div class="col-lg-6">
  <div class="header-img">
    <img src="<?php echo get_template_directory_uri(); ?>/img/banner-image-1.png" alt="Banner Image" class="img-responsive">
  </div>
</div>

• get_template_directory_uri()会输出当前激活主题的根目录绝对URL（比如https://yourdomain.com/wp-content/themes/your-theme-name/），加上/img/banner-image-1.png就精准指向了图片的实际位置。
• 务必确认：图片确实在主题文件夹的img子目录里，文件名和扩展名完全匹配（Linux服务器区分大小写，比如Banner-Image-1.png和banner-image-1.png会被视为两个不同文件）。

2. 子主题场景：改用 get_stylesheet_directory_uri()

如果你用的是子主题，这个函数会优先指向子主题目录，确保你引用的是子主题img目录里的图片：

<div class="col-lg-6">
  <div class="header-img">
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/banner-image-1.png" alt="Banner Image" class="img-responsive">
  </div>
</div>

额外排查点 #

如果改完路径还是不显示，可以检查这些地方：

• 文件权限：主题的img目录权限设为755，图片文件权限设为644（避免服务器拒绝访问）。
• 浏览器缓存：按Ctrl+F5强制刷新页面，清除浏览器缓存后再尝试。
• 文件名拼写：确认图片文件名没有打错（比如把banner写成imgbanner，或者扩展名是.PNG而不是.png）。

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