图像没有显示。我正在使用 express、EJS 和 bootstrap

Question

我正在制作一个网站，但由于某种原因图像没有显示在浏览器上。 ALT TEXT 显示正确，但图像不正确。图片已放置在public/images...

代码如下：

<section03>
          <div class="container-fluid">
            <div class="row">


              <div class="col-4">
                <img src="public\images\untitled.png" alt="an image">
                <a href="#" style="text-align: center;">SOME TEXT</a>
              </div>


            </div>
          </div>
        </section03>

Answer 1

尝试对图像路径使用 forward 斜杠而不是 back 斜杠

       <section03>
          <div class="container-fluid">
            <div class="row">
              <div class="col-4">
                <img src="public/images/untitled.png" alt="an image">
                <a href="#" style="text-align: center;">SOME TEXT</a>
              </div>
            </div>
          </div>
        </section03>

更多例子：>>>

Answer 2

您需要先为 express 应用程序设置静态文件夹路径，以便使用 ejs 或 html 访问静态文件。在这里，我们将 public 文件夹视为我们应用程序的静态文件夹。

只需将以下行复制到您应用程序的入口点，然后将“./public”替换为您的 public 文件夹路径。

app.use(express.static("./public"));

完整示例代码

const express = require("express");
const app = express();
app.use(express.static("./public"));

app.get("/", (req,res) => {
    return res.send("welcome")
})

/* Start Server */
app.listen(5000, () => {
    logger.info(`Success, service running on port 5000.`);
})

此外，

<img src="public\images\untitled.png" alt="an image"> 将替换为 <img src="/images/untitled.png" alt="an image">

图像没有显示。我正在使用 express、EJS 和 bootstrap

The images are not showing up. I'm using express, EJS and bootstrap

html

css

ejs

express

bootstrap-4