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

Question

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 1

您需要使用JavaScript内置函数encodeURI对URI进行编码，因为URI中包含一个空格，该空格使无效：

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

Answer 2

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