链接图像未从 Json 加载到哈巴狗答案

【问题标题】：link images not loading from Json to pug链接图像未从 Json 加载到哈巴狗
【发布时间】：2021-12-27 06:09:13
【问题描述】：

我正在使用带有 pug 作为模板的 express 来创建产品页面，并将数据存储在 JSON 文件中，但是在产品页面上，图像没有加载，我只是收到了返回的链接。如果您需要我向您展示其他内容，请告诉我，我还有一个 route.js 文件。

JSON

[
    {
        "name": "Jetpack pitus",
        "price": 150000,
        "model": "2021",
        "img_url": "https://cdn2.unrealengine.com/Fortnite%2Fpatch-notes%2Fv4-2-contentupdate%2Fheader-v4-2-content-update%2FJetpack-1920x1080-20e524ca933c434a4c07719a5405e60041b47a1f.png"
    },
    {
        "name": "Jetpack venus",
        "price": 125000,
        "model": "2020",
        "img_url": "https://www.ginx.tv/uploads/Iron_Man_Stark_industries.png"
    },
    {
        "name": "Jetpack enormus",
        "price": 200000,
        "model": "2022",
        "img_url": "https://www.x-jetpacks.com/wp-content/uploads/Jetpack-NX-Square-front-and-back.jpg"
    }
]

哈巴狗：

extends layout

block content 
        each product in data 
            p=product.name 
            p=product.price
            p=product.model 
            p=product.img_url 

            p 
            a.btnOrder(href='/orders') Make an order!!!

index.js：

const express = require('express');
const pug  = require('pug');
const path = require('path');
const routes = require('./routes/routes');

const app = express();

app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
app.use(express.static(path.join(__dirname, '/public')));

const urlendcodedParser = express.urlencoded({
    extended: false
});

app.get('/', routes.index);
app.get('/products', routes.productsData);
app.get('/orders', routes.orders);
app.get('/submitted', routes.submitted);
// app.post('/submitted', urlendcodedParser, routes.submitted);
app.listen(3000);

【问题讨论】：

标签： javascript json image pug

【解决方案1】：

假设您正确调用了render 方法并将您的数组作为data 传递，那么要显示图像，它应该类似于：

each product in data 
  p=product.name 
  p=product.price
  p=product.model 
  p
    img(src=product.img_url)

  p 
    a.btnOrder(href='/orders') Make an order!!!

您可能还希望使订单请求更具体，而不是所有产品的通用页面：

a.btnOrder(href="/orders?model="+product.model) Make an order!!!

当然，您必须编写路由/orders 才能读取查询字符串。

【讨论】：

谢谢，完美！