在 JADE 中显示来自 url 的图像答案

【问题标题】：Displaying an image from a url in JADE在 JADE 中显示来自 url 的图像
【发布时间】：2017-04-20 13:32:04
【问题描述】：

这里的第一个问题。新的网络开发学生。感谢您的耐心等待。

我有一个应用程序正在工作并以翡翠布局显示 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 存储到数据库中的图像，然后从数据库中提取该信息并使用它来显示图像可能不是做某事的理想方式。我正在为一项任务做一个项目，并想尝试一些简单的事情。我认为从数据库中提取 url 并将其显示在 span 中就可以了。我需要做的就是将它包装在一个图像标签中。像这样

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

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

我做错了什么？

【问题讨论】：

如何设置 spans 的内容？

标签： image mongodb url express pug

【解决方案1】：

我假设你正在使用类似的东西：

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

在此处设置实际的图像 url。您尚未在问题中显示如何设置任何其他用户信息。假设这是你正在做的事情，你会想要做这样的事情：

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)

【讨论】：