2016-12-06 105 views
0

這裏的第一個問題。新的網絡開發學生。感謝您的耐心等待。在JADE中顯示來自url的圖像

我有一個應用程序工作,並在玉石佈局中顯示mongoDB的內容。跨度內。如此。

 // USER INFO 
    #userInfo 
     h2 User Info 
     p 
      strong Name: 
      | <span id='userInfoName'></span> 
      br 
      strong Age: 
      | <span id='userInfoAge'></span> 
      br 
      strong Gender: 
      | <span id='userInfoGender'></span> 
      br 
      strong Location: 
      | <span id='userInfoLocation'></span> 

我的問題是這樣的。我想要看到的內容是實際圖像。我有圖像的網址。它在我的服務器上。該URL來自mongo數據庫。我意識到將文本url存儲到數據庫中的圖像,然後從數據庫中提取該信息並使用它顯示圖像可能不是完成某些操作的理想方式。我正在爲一項任務開展一個項目,並想嘗試一些簡單的事情。我想拉數據庫的網址,並顯示在跨度將沒事。我需要做的就是將其包裝在圖像標籤中。像這樣

<img src="http://www.whateverdomain.com/images/bobphoto.jpg"> 

雖然它不工作。我只是得到了網址。 (見附圖)

我做錯了什麼?

enter image description here

+0

你如何設置跨度的內容? – ForbesLindesay

回答

0

我假設你正在使用喜歡的東西:

document.getElementById('userPhoto').textContent = (
    '<img src="http://www.whateverdomain.com/images/bobphoto.jpg">' 
); 

在此處設置實際圖片的網址。你沒有在你的問題中顯示你如何設置任何其他用戶信息。假設這是你在做什麼,你想要做的事,如:

const img = document.createElement('img'); 
img.setAttribute('src', 'http://www.whateverdomain.com/images/bobphoto.jpg'); 
document.getElementById('userPhoto').appendChild(img); 

另外,如果傳遞的信息數據進入你的哈巴狗的模板,你可以這樣做:

strong Location: 
img(src=userInfo.imageSource)