<img src=…> does not display local images in WordPress header.php and index.php

Question

I am trying to use a simple <img src= tag to link to a favicon.ico in my header.php file and a .png logo in my index.php file in my WordPress theme, but without any luck. I've tested the link by replacing it with a hyperlink to an image hosted online, which works and proves that the <img src= tag isn't broken, but obviously I would prefer to be able to have the images linked within an internal img folder in the theme. The background image I have used in my site (which is linked in the bootstrap.css and is in the same 'img' folder as the two images I am trying to link to) works perfectly. I've tried copying the formatting of that href link but it doesn't seem to work either.

I've tried many variations of 'img/favicon.ico' , '/img/favicon.ico' , '../img/favicon.ico' but none of them worked to link to the image files in both cases.

Here is my code for the header.php file:

<?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">

And here is the code for the index.php file:

<?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" alt="UQ SoFA logo">
            </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 .

Any help that could be provided would be much appreciated.

Answer 1

Please use it as follow :--

<img src="<?php echo get_template_directory_uri(); ?>/img/favicon.ico">

I hope it will works for you.

Answer 2

You are better to use automatic path, if your image is in your template directory for example :

<img src="<?php echo get_bloginfo("template_directory"); ?>/img/favicon.ico" />

You have to remember that the path is relative to the website address, when using /path/to/file , this will be absolute from the domain, so from the root in the website on server side. When using path/to/file , it will be relative to the web page, not the PHP file. This means if you have http://example.com/category/page , the server will try to find <websiteroot>/category/page/path/to/file .

Answer 3

我找到了答案，方法是使用Alexandre建议的方法，然后将<link rel="icon ”更改为<link rel="shortcut icon"

<img src=…> does not display local images in WordPress header.php and index.php

Question

3 answers

solution1
3 2017-03-30 11:46:44

solution2
0 2017-03-30 11:22:31

solution3
0 ACCPTED 2017-04-02 06:30:54

<img src=…> does not display local images in WordPress header.php and index.php

Question

3 answers

solution1 3 2017-03-30 11:46:44

solution2 0 2017-03-30 11:22:31

solution3 0 ACCPTED 2017-04-02 06:30:54

solution1
3 2017-03-30 11:46:44

solution2
0 2017-03-30 11:22:31

solution3
0 ACCPTED 2017-04-02 06:30:54