Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

187
Vistas
link images not loading from Json to pug

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%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"
    }
]

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);
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda