Images appear to be broken when developing my WordPress theme

1

So when I add images as follow in the text editor:

<button class="menu-button">
	<img class="three-lines" src="three-lines-grey.svg" alt="menu-hamburger" width="10" height="10">
    Menu
</button>

They appear as broken images. I tried many times & checked the source of the images but still in vain. I used png images also not just svg

Meantime, when I added an image via the WordPress admin panel it works.

I use Ubuntu, I checked files permissions and ownership. Changed them to -rwxrwxrwx 1 www-data www-data and added myself to www-data group.

Tried many things but still images appear to be broken.

If you have any idea how to fix this let me know so that I can move forward in the development of my theme.

Thanks

2

Hello!

Are you trying to use an image uploaded through the admin panel of WordPress on your theme or trying to reference an image inside your theme folder?

3

Have you tried asking on WordPress developer forums?

4

I am trying to reference an image inside my theme folder, uploading images through admin panel worked.

I am trying to add a 3 line image (hamburger) for a menu button.

5

I start with FCC then I will ask on Stack Overflow and elsewhere.

6

In that case, you must use the absolute path with get_template_directory_uri:

<img class="three-lines" src="<?php echo get_template_directory_uri(); ?>/three-lines-grey.svg" />
1 Like
7

This works but could you tell me why, or point me to an article to read.

Thanks

8

Hmm, it’s because of how file paths work.

If you write just the file name, the browser assumes you’re pointing to the root of your website. If you use the absolute path, then you tell the browser exactly where is the file is.

Search online how paths work on your computer and on the web :slight_smile:.

1 Like