custom wordpress theme: layout images not displaying

4
votes

I'm building a custom wordpress theme.So I have my Theme folder with the following files/folders:

header.php
index.php
footer.php
style.css
/images
 picture-1.jpg

My problem is that I can't display correctly images using img TAG either in index.php,header.php and footer.php:

[..]
<div class="module">
<h4>General info</h4>
<img src="images/picture-1.jpg"/>
[..]

enter image description here

Images are existing and are displaying correctly if referenced by style.css :

.banner{
  background-image:url(images/picture-1.jpg);
}

Do I miss something?

thanks Luca

2
phphtmlcssimagewordpress

2 Answers

12
votes

It's because your files aren't in /images relative to the page you're viewing, they're in wp-content/themes/[yourthemename]/images.

You can get round this by setting a base URL to the root of your site in the head section of your site and linking images as shown above or by using something like this:

<img src="<?php bloginfo('template_directory'); ?>/images/picture-1.jpg" alt="alt text" />

0
votes

Try this:

<img src="<?php echo get_template_directory_uri();?>/images/img-9.png"/>