javascript - 在 Pug/Jade 模板引擎中显示图像

Question

我正在尝试显示来自对象的图像以获取 Http 方法（'/campgrounds'）。使用 campgrounds 数组获取 Http 方法有 3 个具有 2 个属性的对象 如何在主页中显示图像链接？

app.set("view engine", "pug"); 
app.get('/campgrounds', (req, res) => {
    const campgrounds = [
        {
            Name: "Name1", 
            Image: "https://images.unsplash.com/photo-1571687949921-1306bfb24b72?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
        },
    ]; 
    res.render("campgrounds", { campgrounds: campgrounds });
});

这是campgrounds.pug页面

html 
  head 
  body 
      h1 This is the Campgrounds Page!  
       each val in campgrounds  
        ul
         li=val.Name 
         li=img(src=val.Image) // get the images as stirng links 
             

标签： javascriptexpresspugtemplate-engine

Answer 1

缩进img标签：

each val in campgrounds  
  ul
    li=val.Name 
    li
      img(src=val.Image)