使用 pug、js、json 加载图像

Question

我在使用完全响应和自动生成的 pug 和 js 页面时遇到一些问题，我使用 js 文件将 JSON 数据传递到 pug 页面，pug 页面正确加载所有内容但不是图像（图像是 url)。我该怎么做才能让它加载？这是代码：哈巴狗:

block content
 html
  head
    title #{title}
    link(rel='stylesheet', href='/css/style.css')
    meta(name="viewport" content="width=device-width, initial-scale=1")
  body
    header.header
          h1 #{title}
    each person in p
      div.person
        div.person-image
         img(src=('/${person.image}') top center no-repeat;) 
        a(href=`/user/poeti/person?name=${person.name}`)
         h2 #{person.name}

js:

router.get('/poeti/person', function(req,res,next){
    const person = people.find((m) => m.name === req.query.name);;
    res.render('poeti', {
    title: person.name,
    pt: person
  });
});
-----------------------------------------------------------------
router.get('/new', function(req, res, next) {
 res.send(createFakePerson());
});
-----------------------------------------------------------------
function createFakePerson()
{
 people.json=new Object;
 let person;
 let vett = new Array();
 let texts = new Array();
 var i;
 for (i = 0; i < 10; i++) {
  let randomName = faker.name.findName(); // random name
  let randomEmail = faker.internet.email(); // random mail
  for (n = 0; n < 5; n++) {
   let randomText = faker.lorem.text(); // random text
   texts.push(randomText)
  }
  let randomCountry = faker.address.country() // random country
  let randomWebSite = faker.internet.url() // random website
  let randomProfile = faker.image.avatar() //random people image

  person = {
   name:randomName,
   email:randomEmail,
   text:texts,
   nazionality: randomCountry,
   website: randomWebSite,
   image: randomProfile
 }
 vett.push(person)
}

 let data = JSON.stringify(vett);
 fs.writeFileSync('people.json', data);
 return vett;
}

JSON（这是我的 json 文件的一个较短示例）：

[{
name: Pippo
email: Pippo@mail.com
text:[random texts]
image: https://randomimage
},{other random peoples}]

现在，如何让哈巴狗在 url https://randomimage 上显示我的图像？（在这种情况下，图像不存在，这只是一个示例）如果您需要了解其他任何信息以提供帮助，请告诉我。

P.S。我正在使用一个名为 faker.js 的库来生成随机信息。

Answer 1

person.find 函数将 return 仅来自一组人的单个记录。因此，你的哈巴狗中的语句 each person in p 只会遍历对象的属性，而不是一组人。您可以在 pug 代码中进行这些更改以显示图像。

...
...
  body
    header.header
      h1 #{title}
      //each person in p
      div.person
        div.person-image
          img(src=p.image top center no-repeat) 
          a(href=`/user/poeti/person?name=${p.name}`) Link
          h2 #{p.name}

使用 pug、js、json 加载图像

Loading image using pug, js, json

javascript

json

image

node.js

pug