在JADE中显示来自URL的图像

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>

我的问题是这个。我希望在跨度内看到的是实际图像。我有图片的网址。它在我的服务器上。该网址来自mongo数据库。我意识到将文本URL存储到数据库中的图像然后从数据库中提取该信息并使用它来显示图像可能不是理想的做事方式。我正在为一项任务工作，并想尝试一些简单的事情。我想从数据库中提取url并在跨度中显示它会很好。我需要做的就是将其包装在图像标签中。喜欢这个

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

虽然它不起作用。我只是得到了网址。 （见附图）

我做错了什么？

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)