Блог

Главная - Вопросы по программированию - приложение express / ejs, svg-изображения панели навигации не загружаются на некоторых страницах?

приложение express / ejs, svg-изображения панели навигации не загружаются на некоторых страницах?

#css #express #ejs

#css #экспресс #ejs

Вопрос:

Итак, моя панель навигации сохраняется как частичная в довольно простом приложении express. У меня есть панель навигации, также включенная в стандартную оболочку, которая используется на большинстве страниц, например:

 <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=Antonamp;display=swap"
            rel="stylesheet"
        />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Open Sansamp;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>

Может быть, я должен упомянуть, что страницы, на которых отображаются изображения, находятся в одном каталоге, а сами изображения общедоступны.

Каждый файл начинается с <% layout(«layouts/ boilerplate») %>, но он отображает изображения только на определенных страницах.

Комментарии:

1. Можете ли вы показать свой код? Мы никак не можем узнать, что это за svg-изображения, где вы их разместили и почему они не отображаются

Ответ №1:

Первый:-

у тега img нет закрытого тега, так что это неправильно

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

вы должны удалить закрытый тег, чтобы он был таким

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

второе: —
вы упомянули, что изображения находятся в другом каталоге, и вы не перенаправили их в src

 src="profile.svg"

чтобы правильно проложить маршрут, есть два способа: —
первый :-

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

второе: —
если вы используете express, вы можете сделать статический файл в свой общедоступный файл в server.js вот так

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

и затем вы можете перенаправить непосредственно в общедоступный каталог

 src="./public/profile.svg"
Метки: