Папка изображений не включена в «производство». Статические файлы CSS и JS подаются, но изображения нет - PullRequest
Новая
       16

Папка изображений не включена в «производство». Статические файлы CSS и JS подаются, но изображения нет

0 голосов
/ 11 июля 2019

Это сводит меня с ума со временем. У меня есть простой сервер nodejs / express, который обслуживает index.html из публичного каталога. Поэтому я настроил middleware app.use (express.static ('public')) для обслуживания файлов CSS JS и изображений из каталога "public". Однако я не могу заставить изображения работать в «производстве», поэтому после их развертывания на Heroku. В DevTools получить статус 404, как папка Images не существует. На моей локальной машине все работает нормально, поэтому я предполагаю, что это проблема пути, но не могу ее взломать.

Я попытался переключиться на абсолютный путь (например: https://myappname.herokuapp.com/images/filename.svg или https://myappname.herokuapp.com/public/images/filename.svg), в другой комбинации с промежуточным программным обеспечением express.static, например app.use (express.static (path.join (__ dirname, 'public) '))), но, похоже, ничего не работает. Я что-то упустил?

Структура файлов следующая: 

>index.js
|public
  >index.html
  |css
    >style.css
  |scripts
    >script.js
  |images
    >collection-SVG-sprite.svg
    >test.jpg

(Есть больше папок и файлов, но не связанных с проблемой)

Мой index.js выглядит так: 

const express = require('express')
const puppeteer = require('puppeteer')
const hbs = require('handlebars')
const fs = require('fs-extra')
const path = require('path')
const bodyParser = require('body-parser')
const multer = require('multer')

const app = express()

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

//more code here

const PORT = process.env.PORT || 5000

app.listen(PORT, ()=>{
    console.log(`App is listening on port ${PORT}`)
})

my index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Free Resume Generator</title>
    <link href="https://fonts.googleapis.com/css?family=Montez|Poiret+One|Iceberg|Rajdhani:300,400,500,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link rel="stylesheet" href="/css/style.css">

</head>
<body>

    <nav class='mainNav'>
        <div class='mainNav__left'>
            <i onClick="goHome()" class="fas fa-home mainNav__left--i"></i>
            <div class='mainNav__left--section'>
                <p lang="en">Sections:</p>
                <p lang="pl">Sekcje:</p>
            </div>
        </div>
        <div class="mainNav__language">
            <div onClick="switchLanguage('en')" name='language__photo' class="mainNav__language--icon" >
                <svg>
                    <use xlink:href="/images/collection-SVG-sprite.svg#uk"></use>
                </svg>
            </div>
            <div onClick="switchLanguage('pl')" name='language__photo' class="mainNav__language--icon">
                <svg>
                    <use xlink:href="/images/collection-SVG-sprite.svg#poland"></use>
                </svg>
            </div>
        </div>
    </nav>
<img src="/images/test.jpg" style="width:10rem" alt="test image" />
...
<script src='/scripts/script.js'></script>
</body>
</html>

Я не могу получить значки ни от спрайта, ни от тестового изображения. Относительные пути такие же, как для тега «script» и «link», и они загружаются просто отлично. Понятия не имею, почему изображения нет. У меня есть другие сайты с похожей архитектурой, никаких проблем. В этом, однако, я использую некоторые другие зависимости (кукловод, hbs, fs-extra), может быть, они вызывают проблему?

Я нашел здесь несколько похожих тем, но ни один из них не дал мне правильного ответа.

1 Ответ

0 голосов
/ 11 июля 2019

Мне стыдно, но, возможно, кто-то воспользуется моей ошибкой.Все хорошо со структурой папок / файлов, а также с промежуточным программным обеспечением Express.Проблема заключалась в том, как я внес изменения в Heroku.Insted of: мерзавец добавить.> git commit -m'some message '> git push heroku master

Все время я использовал ярлык: git commit -a -m'some message'> git push heroku master

, которыйТаким образом, я не развернул папку с изображениями, которую создал / добавил в свой проект позже (после первоначального развертывания).Поскольку я забыл, что флаг -a:

Скажите команде автоматически размещать файлы, которые были изменены и удалены, но новые файлы, о которых вы не сообщили Git, не затрагиваются.

...