If you’re adding pictures to your website, but they aren’t showing up, there are a number of possible reasons, but the most likely cause is that you have the wrong file path. The first step to debugging this issue is to see if you can directly navigate to the the image in your web browser. So instead of using the
<img> tag, just type the address into your browser where you think the image should live. For example, you would just go to this url: http://www.webdevbydoing.com/wp-content/uploads/beach.jpg
If your image doesn’t load the way my link above does, then you’re facing at least one of the following issues:
- You have the wrong file name. Be sure that you have the exact name of the file correct, including the extension and capitalizations. Keep in mind that “.jpg” and “.jpeg” are NOT the same, nor are “Beach.jpg” and “beach.jpg” . I would always recommend to not have any special characters or spaces in your file names because they will need to be changed into their unicode equivalent. Notice that my file name is “beach.jpg”, not “Beach, Picture.jpg”. Using a comma or space in the file name will make it much more difficult to locate. Using dashes “-” or underscores “_” are great alternatives to white spaces in file names.
- You have the wrong file path. Check out the folder path on your server and make sure that all folder names are spelt correctly. Also be sure that all upper cases and lower cases are matched correctly. For example, if my folder name was “uploads” but I put “Uploads” in the URL, then nothing will show up.
- Your file was never actually put on the server. IF you’re using an http:// address, then make sure that the file was actually pushed to your server. If you’re just testing locally on your computer, then you should instead be using the file:// protocol.
There are two ways that you can link to your image, you can put the Absolute File Path, or the Relative File Path. Each one has its own advantages. If you’re using a Relative File Path, your image might not be showing up because the path is incorrect.
If you follow all these steps, your image should definitely be showing up