Estoy haciendo una página de productos usando express con pug como plantilla y almacenando los datos en un archivo JSON, pero en la página de productos las imágenes no se cargan, solo recibo los enlaces. avíseme si necesita que le muestre algo más, también tengo un archivo 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" } ]doguillo:
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!!!índice.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);Suponiendo que está invocando el método de render correctamente y pasando su matriz como data , entonces para mostrar imágenes debería ser algo como:
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!!!También es posible que desee que la solicitud de pedido sea más específica en lugar de una página común para todos los productos:
a.btnOrder(href="/orders?model="+product.model) Make an order!!! Por supuesto, debe codificar la ruta /orders para leer la cadena de consulta.