在JADE中显示来自URL的图像

first question here. New web development student. Thank you for your patience.

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

I have an application working and displaying the contents of a mongoDB in a jade layout. Inside of spans. Such as this.

我有一个应用程序工作并以玉石布局显示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>

My question is this. What I want to see appear inside the span is the actual image. I have the url to the image. Its on my server. The url is coming from the mongo database. I realize that storing the text url to an image in a database and then pulling that info from the database and using it to display an image may not be the ideal way to do something. I am working on a project for an assignment and wanted to try something simple. I figured pulling the url from the database and displaying it in the span would be fine. all I would need to do is wrap it in an image tag. Like this

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

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

It doesnt work though. I just get the url. (see attached pic)

它不起作用。我只是得到了网址。 (见附图)

What am I doing wrong?

我究竟做错了什么?

1 个解决方案

#1

I assume you are using something like:

我假设您使用的是:

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

to set the actual image url here. You haven't shown in your question how you set any of the other user info. Assuming this is what you're doing, you would want to do something like:

在这里设置实际的图像网址。您没有在问题中显示如何设置任何其他用户信息。假设这就是你正在做的事情,你会想做类似的事情:

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

Alternatively, if you are passing the information as data into your pug template you could do something like:

或者,如果您将信息作为数据传递到您的哈巴狗模板,您可以执行以下操作:

strong Location:
img(src=userInfo.imageSource)

#1