GY22
GY22

Reputation: 785

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

Upvotes: 2

Views: 17778

Answers (2)

Oat Teeraphat
Oat Teeraphat

Reputation: 41

i'm use user.facebook.profilepic is bson string path image http from graph facebook api with passport.js u can Try applying for bson str path

<img src="<%= user.facebook.profilepic %>" alt=""> in .ejs file

Upvotes: 4

chridam
chridam

Reputation: 103365

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)) %>

Upvotes: 2

Related Questions