I can't add a gif to HTML file

Question

I can't add a gif to my HTML file.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>

    <div class="header">
        <div class="navigation">
            <ul class="nav-list">
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="About">About</a></li>
            </ul>
        </div><!--end of navigation -->
    </div><!--end of header -->

    <header>
        <img id="headerLogo" src="images/headerLogo.gif" alt="Starbuzz Coffee logo image">
        <img id="headerSlogan" src="images/headerSlogan.gif" alt="Providing all the...">
    </header>

</body>
</html>

I inserted the gif in the project folder, in WebContent folder of the project and in src folder of the project and none of those work. Can someone tell me why?

Have you tried creating an `images/` folder in your src directory and then putting the gifs there? Generally, when you say `src="images/something.gif"` to serve static assets, the expectation is that the path in the `src` field matches the directory path of the assets in your project. — Glyoko, Apr 22 '19 at 17:07
Nothing wrong with your code. please try to target your specific folder using ~/ or ../ in src attribute. — Prakash Mhasavekar, Apr 22 '19 at 17:08
Possible duplicate of [How to animate GIFs in HTML document?](https://stackoverflow.com/questions/38309480/how-to-animate-gifs-in-html-document) — Morteza Jalambadani, Apr 22 '19 at 18:32
The .gif file needs to be in the `src` attribute value relative to where the HTML file is, so that's `/WebContent/images/headerLogo.gif`, for one of them. — nitind, Apr 22 '19 at 20:18

score 0 · Answer 1 · answered Apr 22 '19 at 17:06

0

Your HTML says src="images/headerLogo.gif", so you need to place your GIF in a subdirectory images. If your HTML is in .../html, place the GIF in ../html/images/headerLogo.gif.

If you want to place the GIFs in the same directory as the HTML files, omit the reference to images: src="headerLogo.gif".

answered Apr 22 '19 at 17:06

RalfFriedl

1,134
3
11
12

I placed it in WebContent together with the html file but it doesn't work. I'm using Eclipse btw – user11395868 Apr 22 '19 at 17:22
I just explained why the HTML you posted won't work if you place the images in the same directory as the HTML. I also mentioned two possibilities to fix this. Did you try them? – RalfFriedl Apr 22 '19 at 17:30
and btw my html file is in projectName/WebContent – user11395868 Apr 22 '19 at 17:48

score 0 · Answer 2 · answered Apr 22 '19 at 17:14

0

You have to put in main directory.You can't put it to any folder. Url should look like this -

answered Apr 22 '19 at 17:14

wordpress_king

7
5

score 0 · Answer 3 · answered Apr 22 '19 at 21:21

See if you get this

<header>
<!-- If index is common and image is in a subfolder -->
        <img id="headerLogo" src="images/headerSlogan.gif" alt="Starbuzz Coffee logo image">
        
<!-- If index page and image are in seperate subfolders -->
        <img id="headerSlogan" src="../images/headerSlogan.gif" alt="Providing all the...">
        
<!-- If index page and image are in the same subfolder -->
        <img id="headerSlogan" src="headerSlogan.gif" alt="Providing all the...">
    </header>

If these are located in two different folders then you first have to exit the folder holding the webpage and then go into the images folder.

So if the site was in a webpages folder you'd have to do something like this:

**src="../images/imageName.gif"**

the ../ is used to move back by one folder

If they are both in the same folder then there is no need of a relative path. All you need to enter is

**src="imageName.gif"**

score 0 · Answer 4 · answered May 21 '20 at 02:23

0

Use the <img> tag. Like:

<img src=""></img>

<img src="GIF_File.gif"></img>

This worked for me

answered May 21 '20 at 02:23

I can't add a gif to HTML file

4 Answers4