CODEWITHSUNDEEP
htmlexpress-handlebars
Marco Lapegna
Marco Lapegna

Reputation: 11

What's wrong with the src attribute in this img tag?

I got a handlebars main template with the following code.

<!doctype html>
<html>
<head>
    <title>Meadowlark Travel</title>
</head>
<body>
    <header><img src="/img/logo.png" alt="Meadowlark Travel Logo"></header>
    {{{body}}}
</body>
</html>

and I have a directory structure like this.

└── meadowlark.js
└── img
   └── logo.png

└── views

   └── home.handlebars

   └── layouts

         └── main.handlebars

When I boot up the server I get a 404 error for image. What am I typing wrong in the src attribute? meadowlark.js is what runs the server.

I have no clue what else to try I keep getting 404 error no matter what I type in.

Upvotes: 0

Views: 95

Answers (2)

Marco Lapegna
Marco Lapegna

Reputation: 11

Not sure what I did but it's working now. I did set the img folder to static with this line: app.use(express.static(__dirname + '/public')); and then put the img folder inside public.

Or maybe the browser cached some earlier copy with bad code and now I refreshed it. Either way it's working now.

Upvotes: 1

rafael
rafael

Reputation: 11

I believe you need to use relative path like img/logo.png, the way you are doing it it's trying to find on the root level, since the img folder you have is sibling of the HTML file you should use a relative path.

So basically just remove the initial /

<header><img src="img/logo.png" alt="Meadowlark Travel Logo"></header>

Upvotes: 0

Related Questions