Question

'正在尝试使用我的服务器 node.js 以动态方式显示我的 ejsfile 部分中的图像。但我在我的浏览器中得到并错误 GEThttp://localhost:3000/butik_html/jordan_1/jordan1_3.jpg。这是代码：

服务器端：

const path = require('path');
const express = require("express");
const app = express();
const bodyParser = require('body-parser');
const fs = require('fs');
const ejs = require('ejs');
const productFile = require('./butik_html/js_file/product');

app.set('view engine', 'ejs');
app.use('./public', express.static(path.join(__dirname, './butik_html')));
app.get('/', (req, res) => {
    fs.readdir('./butik_html/jordan_1', (err, data) => {
        if (err)
            console.log(err);
        else {
            res.setHeader('content-type', 'text/html');
            res.render('products', { datalink: data });
        }
    });
    
});

app.listen(3000);

客户端（ejs file）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Butik|products</title>
</head>
<body>
    <header>
        <h1>Butik</h1>
        <p class="blackColor">-<span>BLACK COLOR</span> Entertainment-</p>
    </header>
    <section class="markContainer">
        <h4>Our Products</h4>
        <hr>
        <p id="airForce">Air Force1</p>
        <p id="airJordan1">Air Jordan1</p>
        <p id="airNike">Air Nike</p>
        <p id="puma">Puma</p>
        <p id="boost">Boost</p>
        <p id="jordan6">Jordan6</p>
        <p id="jordan4">Jordan4</p>
        <p id="jordan3">Jordan3</p>
        <p id="jordan11">Jordan11</p>
        <p id="jordan13">Jordan13</p>
        <p id="timberland">Timberland</p>
    </section>
    
    <section class="shoesContainer">
        <% for( let i = 0; i < datalink.length; i++ ) { %>
        <%- '<div class="shoes"><a><img src="./butik_html/jordan_1/' + datalink[i] + '"' + ' alt="airforce1"></a></div>' %><% } %></section></body></html>

我怎样才能让我的图片在我的 ejs 文件中可见？

0 个答案: