我正在做一個產品頁面，使用 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!!!
索引.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);
uj5u.com熱心網友回復：
假設您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以讀取查詢字串。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358839.html
標籤：javascript json 图片 哈巴狗
上一篇：通過坐標標記影像
下一篇：將頁面URL視為影像URL