ссылка на изображения, которые не загружаются из Json в pug

#javascript #json #image #pug

Вопрос:

Я создаю страницу продуктов, используя express с pug в качестве шаблона, и сохраняю данные в файле JSON, но на странице продуктов изображения не загружаются, я просто получаю ссылки обратно. дайте мне знать, если вам нужно, чтобы я показал вам что-то еще, у меня также есть route.js файл.

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

мопс:

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

Ответ №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 , чтобы прочитать строку запроса.

Комментарии:

1. спасибо, это работает просто идеально!!