Pfthb

I'm trying to get image (jpg file) from node.js and display it in html tag (img), but the picture is not shown (as you can see:).

My node.js which handle the request looks:

app.use(bodyParser.json());
app.use(bodyParser.urlencoded(extended : true));

app.get('/pictureItem', function (req, res) 

 // imagesNames[0].name - contains the name of the image to send (jpg file)
 res.sendFile('/images/' + imagesNames[0].name, root: __dirname ) 
)

and my js code looks:

$.get("/pictureItem", function(data, status) 
 
 console.log("got image");
 $("#imageId").attr("src", data); 
 ) 

what am I missing ?

Your '/pictureItem' route in Express sends an image.

Your ajax call in your client code seems to be expecting to get an URL back, not an image:

$.get("/pictureItem", function(data, status) 
 console.log("got image");
 $("#imageId").attr("src", data); 
);

The usual way you would do this is:

1. Set $("#imageId").attr("src", data); to an URL that your server knows how to serve the image for.


2. This will cause the browser to then request that URL from your server.


3. When your server gets that image request, it will send the image back.


4. The browser will display the image it got back from the server.

I'm not quite sure what the overall problem is you're trying to solve here (you don't show the overall logic of the operation), but you could just do this:

$("#imageId").attr("src", "/pictureItem");

And, then your existing server route would return the desired image when the browser requests the image from the /pictureItem route.

Have you defined the middleware for static files? If yes you could define a GET method which retrieves the path to a specific image and return that so you can attach it to the src attribute.

Your pictureItem endpoint is return the image file itself. Whereas your src attribute expects a string so it can fetch the image itself.

server.js

app.use(bodyParser.json());
app.use(bodyParser.urlencoded(extended : true));
app.use('/images', express.static(__dirname + '/Images'));
app.get('/pictureItem', function (req, res) 
 // returns a string as '/images/someimagename.jpg'.
 res.send('/images/'+imageNames[0].name);
);

someJavascript.js

$.get("/pictureItem", function(data, status) 

 console.log("Found image on url: " + data);
 $("#imageId").attr("src", data); 
);