link images not loading from Json to pug-CodePudding

I'm doing a products page using express with pug as a template and storing the data in a JSON file, but on the products page the images are not loading, I just receive the links back. let me know if you need me to show you something else, I also have a route.js file.

JSON

[
    {
        "name": "Jetpack pitus",
        "price": 150000,
        "model": "2021",
        "img_url": "https://cdn2.unrealengine.com/Fortnite/patch-notes/v4-2-contentupdate/header-v4-2-content-update/Jetpack-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"
    }
]

pug:

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);

CodePudding user response：

Assuming you are invoking the render method correctly and passing in your array as data, then to show images it should be something like:

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!!!

You might also want to make the order request more specific rather than a common page for all products:

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

Of course you have to code the route /orders to read the query string.