Locally Developing a wordpress website, cant get images to display?

Question

I'm currently trying to make a website on WordPress locally using XAMPP, I have started a website but i can't make the images display like i do when developing on a host (this is my first local WP development)

Normally, inside wp-content i make a folder called imgs and then in my code i just use

src="/wp-content/imgs/whatever.png"

but this isn't working. When i inspect the element in google chrome the folder doesn't even exist. I've tried looking at the permalinks, as well as some .htaccess stuff but to no avail. Any help to get my images working would be great

Answer 1

When you use a relative path like /some/path/here.jpg, and you are on www.example.com, the browser will look for

www.example.com/some/path/here.jpg

Which doesn't exist. But you might have noticed that you can use relative path in a CSS file. That's because the path is calculated based on the location of the CSS file, while in your case the images are being calculated based on the location of the current URL.

The main CSS file of your theme is located at your-theme/style.css. You can build relative paths within your stylesheet, for example you can use ../imgs/whatever.jpg in your CSS file to point to wp-content/imgs/whatever.jpg. However, storing any file outside upload directory or theme's is not recommended.

What you can do, is to use core functions to create a full dynamic path. For example get_template_directory_uri(); will get the current theme's path, so you can use in your image's src:

src="<?php echo get_template_directory_uri();?> /imgs/whatever.png"

To get the wp-content's URL, you can use content_url();.