将图像从 javascript 导入到 .pug答案

【问题标题】：Import image from javascript to .pug将图像从 javascript 导入到 .pug
【发布时间】：2020-07-07 01:42:49
【问题描述】：

我是 Web 开发的新手，正在尝试学习如何使用 javascript 和 .pug。我已经用图像文件设置了 var camgrounds

router.get('/campgrounds', function (req, res) {

var campgrounds = [
    {
        title: "Paynetwon Campground",
        image: img(src ="https://cdn.pixabay.com/photo/2020/06/14/17/57/mountains-5298769_960_720.jpg")
    }];
res.render('campground', {
    campgrounds: campgrounds
});

});

当我尝试去露营地渲染页面时，我收到错误消息 “img is not defined”

在我的 camground.pug 上，我写道：

doctype html

each camping in campgrounds


ul
    li= camping.title
    li = camping.image

有人可以帮忙解决这个错误代码吗？

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

Bankole 是对的，您应该将图像路径传递给 Pug，然后让 Pug 完成剩下的工作。但是，在 Pug 中创建图像的正确标记应该是这样的。（如果你想要一个露营地列表，我建议将 ul 元素移到循环之外，如下所示：）

ul
  each camp in campgrounds
    li
      p= camp.title
      img(src= camp.image)

【讨论】：

谢谢..当我运行程序时，我得到了破解图像......这是什么意思？是不是我弄错了网址？
@junjung 你是否也将路由器更改为只传递图像路径？
是的，这是正确的.. 我想做的是将每个图像和名称保存到 js var 中，当我转到 .pug 中的渲染页面时，它应该通过名称和图像。 .

【解决方案2】：

找到了..它只是 img(src=camp.image)

【讨论】：