Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot get image on localhost

I am working on a Node.js Express project and have used Bootstrap carousal template in index.ejs page. The image tag is not working if I try to get the image saved inside the project under "views" folder.

 <img  class="img-circle" src= "/proj1.png"  />  

The index.ejs file is also in "views" folder. The error is: GET http://localhost:3000/proj1.png 404 (Not Found). I have tried changing the relative path of the file also but it did not work.

like image 287
Deepna Avatar asked Sep 18 '15 07:09

Deepna


People also ask

Why is my img tag not working?

Img src Not Working That means, when a web page loads, the browser has to retrieve the image from a web server and display it on the page. The broken link icon means that the browser could not find the image. If you've just added the image, then check that you included the correct image URL in the source attribute.

Why can't I add image in HTML?

Incorrect File Paths When you add images to a site's HTML or CSS file, you must create a path to the location in your directory structure where those files reside. This is code that tells the browser where to look for and fetch the image from. In most cases, this would be inside a folder named images.

Why is the image not showing in HTML table?

Check the src path to fix image not showing Every image in HTML is rendered by using the <img> tag with the image source specified in the src attribute. You can put a relative path or an absolute path to the src attribute depending on where you place the image.


2 Answers

YOu have to serve your static files from express:

try Adding this:

app.use(express.static('public'));

(public is the folder where your images and everything (assets) reside)

More infos here: http://expressjs.com/starter/static-files.html

like image 128
DevAlien Avatar answered Sep 27 '22 20:09

DevAlien


You need to tell express from where should it serve static content.

app.use(express.static('/path/to/your/folder')).

Source: http://expressjs.com/starter/static-files.html

In production, it's a general convention to serve static files using nginx. Look it up.

like image 23
Swaraj Giri Avatar answered Sep 27 '22 22:09

Swaraj Giri