GY22 GY22 - 5 months ago 102
Node.js Question

How to display an image tag with the ejs template engine for node js?

Some background info: i am working with node.js with the express framework and with mongo and passport.js

So basically i was able to login to my app with the FB login and retrieve some info like username, token, id, displayName and photos. Then this data is saved in to my DB (mongo).

I can read all of the data out in my view with the ejs syntax except for the image.

in my view i have the following code for the image:

<%= user.facebook.profilePic %>


this returns the following output:

https://graph.facebook.com/Grace Yip/picture?type=large


but when i surf to this url in the browser i get the following error message

error: {
message: "(#803) Some of the aliases you requested do not exist: Grace Yip",
type: "OAuthException",
code: 803
}


I tried putting the output of my data in an image tag like so:

<%= img_tag( user.facebook.profilePic ) %>


but then i get an error saying: Error: Failed to lookup view "error" in views directory "/Users/Grace/Desktop/QA/views".

When i remove the img_tag code the view works again.

Any idea how i can show the picture ... I am at a loss.

Thanks in advance!

Greetings,

Grace

Answer

You need to encode the URI by using the JavaScript in-built function encodeURI because the URI contains a space in it which is making is invalid:

<%= img_tag(encodeURI(user.facebook.profilePic)) %>