【问题标题】:The images are not showing up. I'm using express, EJS and bootstrap图像不显示。我正在使用 express、EJS 和 bootstrap
【发布时间】:2021-08-18 10:25:37
【问题描述】:

我正在创建一个网站,但由于某种原因,图像没有显示在浏览器上。替代文本显示正确,但图像不正确。图片已放在 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>

【问题讨论】:

  • 可能是您的 src 路径错误。您应该分享您的项目树。

标签: html css express bootstrap-4 ejs


【解决方案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>

更多示例:>>>

【讨论】:

    【解决方案2】:

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

    只需将以下行复制到您应用的入口点,然后将“./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.`);
    })
    

    还有,

    &lt;img src="public\images\untitled.png" alt="an image"&gt; 将替换为 &lt;img src="/images/untitled.png" alt="an image"&gt;

    【讨论】:

    • 非常感谢 Bhavesh Mevada!它完美无缺。
    猜你喜欢
    • 2015-09-06
    • 2013-07-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多