express/ejs 应用程序，导航栏 svg 图像未在某些页面上加载？答案

【问题标题】：express/ejs app, Navbar svg images not loading on some pages?express/ejs 应用程序，导航栏 svg 图像未在某些页面上加载？
【发布时间】：2021-01-17 01:54:24
【问题描述】：

所以，我的导航栏作为一个部分保存在一个相当简单的快速应用程序中。我的导航栏也包含在大多数页面上使用的样板包装中，如下所示：

<h1>HELLO<h1>

在我的样板文件中 <%- include("../partials/navbar")%>

问题是导航栏出现了，但两个 .svg 图像没有显示在某些页面上，在我看来，它们使用完全相同的格式。有谁知道问题可能是什么？

另外，如果我能澄清任何事情，请告诉我 - 我对编码很陌生，所以我的词汇量有点有限。

提前致谢！

编辑（信息远远不够，抱歉）：

这里是导航栏部分的代码：

<nav class="navbar navbar-expand-md sticky-top navbar-dark">
    <a href="/"> <img class="brand" src="logo.svg" alt="" /></a>
    <div class="container-fluid">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav">
                
                <a class="nav-link ms-3" href="/events">Upcoming Events</a>
                <a class="nav-link ms-3" href="/events/new">New Event</a>
                <a class="nav-link ms-3" href="/community">Community</a>
            </div>
            <div class="navbar-nav ml-auto rightLinks" id="navbarSupportedContent">
                
                <% if(!currentUser) { %>
                <p><%= currentUser %></p>
                <a class="nav-link" href="/login">Login</a>
                <a class="nav-link" href="/register">Register</a>

                <% } else { %>
                <a class="nav-link" href="/logout">Logout</a>
                <p class="nav-link">
                    <%=currentUser.username %><img class="profileIcon" src="profile.svg"></img>
                </p>
                <% } %>
            </div>
        </div>
    </div>
</nav>

这是样板：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/style2.css" />
        <link rel="icon" href="/favicon.ico" />

        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Anton&display=swap"
            rel="stylesheet"
        />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
            rel="stylesheet"
        />
        <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
        <link
            href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
            rel="stylesheet"
        />
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous"
        />

        <title>Street Music</title>
    </head>
    <body class="flex-column">
        <%- include("../partials/navbar")%>
        <main class="containter vw-100"><%- body %></main>

        <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"></script>

        <script
            src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"
        ></script>

        <!-- <script src="/javascripts/validateForms.js"></script> -->
    </body>
</html>

也许我应该提一下，显示图像的页面位于同一目录中，并且图像本身是公开的。

每个文件都以开头，但它只显示某些页面上的图像。

【问题讨论】：

你能显示你的代码吗？我们无法知道这些 .svg 图片是什么、您将它们放在哪里以及为什么它们不显示

标签： css express ejs

【解决方案1】：

第一：-

img 标签没有闭合标签，所以这是错误的

<img class="profileIcon" src="profile.svg"></img>

你应该删除封闭的标签是这样的

<img class="profileIcon" src="profile.svg">

第二个：- 您提到图像位于 anther 目录中，并且您没有在 src 中路由它们

src="profile.svg"

要正确制作路线，有两种方法：- 第一个：-

src="../public/profile.svg"

第二个：- 如果你使用 express，你可以像这样在 server.js 中对你的公共文件做静态文件

app.use(express.static('public'))

然后就可以直接路由到公共目录

src="./public/profile.svg"

【讨论】：