<img src=...> 在 WordPress header.php 和 index.php 中不显示本地图像
Posted
技术标签:
【中文标题】<img src=...> 在 WordPress header.php 和 index.php 中不显示本地图像【英文标题】：<img src=...> does not display local images in WordPress header.php and index.php 【发布时间】：2017-08-24 06:12:41 【问题描述】：我正在尝试使用一个简单的<img src= 标签链接到我的 header.php 文件中的 favicon.ico 和我的 WordPress 主题的 index.php 文件中的 .png 徽标，但没有任何运气。我已经通过将链接替换为指向在线托管的图像的超链接来测试该链接，该链接有效并证明<img src= 标签没有损坏，但显然我更希望能够在内部 img 中链接图像文件夹中的主题。我在我的站点中使用的背景图像（在 bootstrap.css 中链接，并且与我试图链接到的两个图像在同一个“img”文件夹中）完美地工作。我已经尝试复制该 href 链接的格式，但它似乎也不起作用。
我尝试了'img/favicon.ico'、'/img/favicon.ico'、'../img/favicon.ico' 的许多变体，但在这两种情况下都无法链接到图像文件。
这是我的 header.php 文件代码：
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package wpbootstrap-sofa
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="icon" href='../img/favicon.ico'>
<!-- Bootstrap core CSS -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- Custom styles for this template -->
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div class="background">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">home</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">home</a>
</li>
<li><a href="#about">about</a>
</li>
<li><a href="#blog">blog posts</a>
</li>
<li><a href="#submit">submit</a>
</li>
<li><a href="#events">events</a>
</li>
<li><a href="#mailing">mailing list</a>
</li>
<li><a href="#contact">contact</a>
</li>
<li><a href="http://uqsofa.bigcartel.com/" target="_blank">store</a>
</li>
</ul>
</div>
<!--/.collapse navbar-collapse -->
</div>
</nav>
<div class="container">
这里是 index.php 文件的代码：
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package wpbootstrap-sofa
*/
get_header(); ?>
<div class="starter-template">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
<div class="center-block">
<a href="index.html">
<img src='../img/sofa-logo.png' class="img-responsive center-block" >
</a>
</div>
<!-- /.center-block -->
</div>
</div>
<div class="row">
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4">
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">home</a>
</li>
<li><a href="#about">about</a>
</li>
<li><a href="#blog">blog posts</a>
</li>
<li><a href="#submit">submit</a>
</li>
<li><a href="#events">events</a>
</li>
<li><a href="#mailing">mailing list</a>
</li>
<li><a href="#contact">contact</a>
</li>
<li><a href="http://uqsofa.bigcartel.com/" target="_blank">store</a>
</li>
</ul>
</div>
<!--/.collapse navbar-collapse -->
</div>
<!-- /.col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4 -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="panel panel-default">
<div class="panel-body">SoFA at Market Day</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Cut Thumb ARI</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">GoMA Talks</div>
</div>
<!-- /.panel panel-default-->
</div>
<!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="panel panel-default">
<div class="panel-body">Interview with...</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Lecture by...</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Post #474</div>
</div>
<!-- /.panel panel-default-->
</div>
<!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
</div>
<!-- /.row-->
</div>
<!-- /.starter-template-->
</div>
<!-- /.container -->
</div>
<!-- /.background -->
<?php
get_footer();?>
Linked here is a screenshot of the configuration of my theme's folders, including the 'img' folder where the images are contained.
我们将不胜感激。
【问题讨论】：
您检查浏览器控制台是否有任何错误消息？ 文件的路径是相对于 PHP 文件的位置。将“../”更改为“./” 是否在页脚中关闭正文和 html？ @SloanThrasher ./ 和 ../ 如果我想进入根文件夹并从那里导航然后我使用 ./../folder1 "../" 意味着在文件夹 @Gert 是的，我的页脚中肯定有他的正文和 html<?php /** * The template for displaying the footer * * Contains the closing of the #content div and all content after. * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package wpbootstrap-sofa */ ?> <footer class="footer"> <div class="container"> <p class="text-muted">&copy; UQ Society of Fine Art 2017 | Site by Patrick Hansen</p> </div> </footer> </div> <!-- /.background --> <?php wp_footer(); ?> </body> </html>
【参考方案1】：
我通过使用 Alexandre 建议的方法找到了答案，然后将 <link rel="icon" 更改为 <link rel="shortcut icon"
【讨论】：
【参考方案2】：请按如下方式使用：--
<img src="<?php echo get_template_directory_uri(); ?>/img/favicon.ico">
我希望它对你有用。
【讨论】：
这适用于我的 index.php 中的徽标问题，但不适用于我的 header.php 中的图标。有什么建议？这是我的代码在尝试了你的建议后的样子：<link rel="icon" <img src="<?php echo get_template_directory_uri(); ?>/img/favicon.ico">我的格式是否错误？【参考方案3】：
如果你的图片在你的模板目录中，你最好使用自动路径：
<img src="<?php echo get_bloginfo("template_directory"); ?>/img/favicon.ico" />
你必须记住路径是相对于网站地址的，当使用/path/to/file时，这将是绝对来自域的，因此来自服务器端网站的根目录。当使用path/to/file 时，它将与网页相关，而不是 PHP 文件。这意味着如果您有http://example.com/category/page，服务器将尝试查找<websiteroot>/category/page/path/to/file。
【讨论】：
这适用于我的 index.php 中的徽标问题，但不适用于我的 header.php 中的图标。有什么建议？这是我的代码在尝试了你的建议后的样子：<link rel="icon" <img src="<?php echo get_bloginfo("template_directory"); ?>/img/favicon.ico" /> 难道我的格式不正确？
嗯，favicon.ico 是在您的模板目录中的 img 目录中吗？还是在别的地方？
favicon.ico 位于我的模板目录中的目录“img”中，是的。 favicon.ico 文件的完整目录是：/public_html/wp-content/themes/wpbootstrap-sofa/img/favicon.ico
我已经通过使用 以上是关于<img src=...> 在 WordPress header.php 和 index.php 中不显示本地图像的主要内容，如果未能解决你的问题，请参考以下文章
为啥 <img [src]> 没有在带有 *ngFor 循环的 <ion col> 内部显示？