Отображение изображения с URL-адреса в JADE

Question

первый вопрос здесь. Новый студент веб-разработки. Спасибо за терпеливость.

У меня есть приложение, работающее и отображающее содержимое 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-адрес изображения. Это на моем сервере. URL-адрес поступает из базы данных монго. Я понимаю, что сохранение текстового url для изображения в базе данных, а затем вытащить эту информацию из базы данных и использовать ее для отображения изображения, возможно, не является идеальным способом сделать что-то. Я работаю над проектом для задания и хочу попробовать что-то простое. Я решил вытащить url из базы данных и показать его в промежутке будет хорошо. все, что мне нужно сделать, это обернуть его в тег изображения. Нравится это

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

Это не работает. Я просто получаю URL. (см. прилагаемый рис.)

Что я делаю неправильно?

Answer 1

Я предполагаю, что вы используете что-то вроде:

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)