Why is my jpg not showing in html?

Error: Images Not Appearing on My Web Page

Below are some reasons why your images may not be displayed correctly on your Web page.

  • Image files were not uploaded to the server

To upload your image files to the server

    1. Open CuteFTP Mac and locate the image files in the left window.

    2. Upload the image files to the server. You should see the files in the right window after the upload.

    3. Go back to your browser and reload or refresh the page. The images should now appear.

  • Image file names are referenced incorrectly

It is possible that your image files were uploaded correctly to the server, but the server is looking for a different image file name. When you created your Web page, you set up a path and a file name that the server uses to look for the image. In your HTML source code, make sure that image file names are correct in all respects, including letter case.

For example, the Web page calls an image with the following tag: <IMG SRC="my_image.gif">.

When you look at the file you uploaded to the server, you notice the file name is MY_IMAGE.GIF. It is all in upper case. Therefore, the Web page is referencing an image file that doesn't exist.

You need to either retype your HTML code in upper case: <IMG SRC="MY_IMAGE.GIF"> or you need to rename the file on the server to lower case to coordinate with the HTML page.

  • Image paths are not referenced correctly

It is possible that your image files were uploaded correctly to the server, but the server's path to the image is incorrect. When you created your Web page, you set up a path for the server to look for the image as well as the exact file name of the image. In your HTML source code, make sure that all paths are directed properly. Make sure your path is not something like: <IMG SRC="file://c/Web_editor\Html\Graphics\my_image.gif">, which would be referencing your hard drive instead of the server.

  • The server cannot find an image stored in a subfolder

Another problem could be that your server cannot find an image located in a subfolder. If your HTML file is looking for the image in the main folder instead of in a subfolder on the server, your image will not be displayed. For example, you may have uploaded your images to a subfolder called Graphics in the main folder, but your HTML IMG tag looks like this: <IMG SRC="my_image.gif">

Because the Graphics subfolder is not referenced in the HTML IMG tag, the server looks in the main folder (or /) but does not see my_image.gif there. The server should be looking for my_image.gif in the subfolder /Graphics (folder names are also case sensitive on the server). To direct the server to the right folder, your IMG tag needs to read <IMG SRC="/Graphics/my_image.gif">. The server would then find and display my_image.gif.

Dear Joe,
<----- I made my page but my images aren't showing up. All I see are little red X's (or blank spots) where the images are supposed to be. What gives?

Ah, if I had a dollar for every time I heard that question. Well, let's just say I'd have a lot of dollars.

In short, the browser isn't displaying the image because the browser can't find it using the instructions you gave it. Those instructions are the src attribute of the img tag...

<img src="mypic.gif" width="100" height="80" alt="My Pic">

Now, there are a few possible reasons why the browser cannot find the image. You might have one problem going on, or all of them. Let's go through the following exercises to see if maybe we can narrow down the problem.

First, try putting the image in the same folder as your html document...

src="mypic.gif" means that the image is in the same folder as the html document that called for it.

This is the simplest way to insert an image. As long as everything is in the same folder, things are pretty simple to find.

Possible snags?

  • Simple (but common) typo: scr= instead of src=
  • Mispelling the image name: src="mypick.gif" or src="my pic.gif" instead of src="mypic.gif"
  • Wrong extension: src="mypic.jpg" when your image is a gif... mypic.gif. (Should I use gif or jpg? You might find this interesting.)
  • Malformed img tag...
    • <img src="mypic.gif" width="100" height="80" alt="My Pic" 
    • <img src="mypic.gif width="100" height="80" alt="My Pic">

Before going on to other possible reasons for your missing image, make sure that you can successfully insert an image as shown above.

Ok, Joe, I can do that, but as soon as I put the image into a different folder, I start having troubles.

It's very common to place images in a folder other than where your html doc resides. It's all fine and dandy, but just keep in mind that you must tell the browser exactly where to find the image. One little mistake.... and image doesn't show up.

Very possibly the cause of your missing image is an improper relative src.

Study the following until you understand how to construct a proper src. I understand it can be confusing... but when you have things in different folders, this is just something you'll have to learn.

Note that ../ means to go up a folder, ../../ means to go up two folders, etc.

Also note that in urls, forward slashes are used --> /
rather than a backward slash --> \

Well, Joe... so far so good. Everything works wonderful until I upload everything to my web host. When viewed on the Internet, my images are missing. Or, while I can view my page just fine, my friends all say the images are missing.

Well, we're definitely starting to narrow down the problem. It's all downhill from here.

First, check for a case problem. Many web hosts are case sensitive. That is, src="mypic.gif" is different than src="Mypic.gif" is different than src="mypic.GIF" is different than src="MYPIC.GIF". I find it's easiest to keep everything lower case.

Another possible cause is that you've instructed the browser to look for the image on your own hard drive. This is common with some HTML editors when they insert an image. If you look at your image tags and the src begins with "file"...

<img src="file:///C:/webpages/images/mypic.gif" width="100" height="80" alt="My Pic">

...then the web browser is looking on your hard drive for the image. The problem is that when someone else views the page, the browser trys to look on THEIR hard drive for the image as well. Since they don't have the image on their drive, it comes up missing.

A proper src is either a relative url (as shown in the illustrations above) or a full url that begins with http://

Chances are about 99.99% that your missing image problem is due to one of the problems shown above. That said, if you've done everything right and still the image no way no how ever shows up, you may have a corrupted image file. It's rare, but it happens.

One way to tell is to drag and drop the image file onto a browser window. If the browser displays the image, then it's probably OK.

Well, that about covers it. If your images are missing, then somewhere above is your solution. Good luck!

Why is JPG not loading in HTML?

There are several possible reasons why your images are not showing up on your pages as expected: The image file is not located in the same location that is specified in your IMG tag. The image does not have the same file name as specified in your IMG tag. The image file is corrupt or damaged.

How do I display a JPEG in HTML?

Here's how it's done in three easy steps:.
Copy the URL of the image you wish to insert..
Next, open your index. html file and insert it into the img code. Example: <img src=”(your image URL here)”>.
Save the HTML file. The next time you open it, you'll see the webpage with your newly added image..