使用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: [email protected]
text:[random texts]
image: https://randomimage
},{other random peoples}]

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

P.S。我正在使用一个名为faker.js的库，该库可以让我生成随机信息。

Answer 1

person.find函数将仅从一组人员返回单个记录。因此，哈巴狗中的语句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}