Приложение Live Heroku содержит все разбитые изображения, кроме фонового изображения (React / Node.js) - PullRequest
0 голосов
/ 09 марта 2020

Когда сайт работает, каждое изображение, кроме фоновых изображений, жестко закодированных в CSS, выглядит как испорченное.

Я создаю приложение из главной ветки на Github. В хранилище все изображения загружаются нормально и расширения не нарушены / не отличаются от фонового изображения. Фоновое изображение находится в том же каталоге, что и другие, и работало, когда я размещал на Netlify абсолютно нормально.

На консоли изображения выдают ошибку 404.

Есть идеи?

Живой сайт: https://deathless-studio.herokuapp.com/# /

Репозиторий, в котором находятся изображения: https://github.com/matthew-devonport/DEATHLESS-Portfolio/tree/master/server/public/Images

Спасибо!

Ответы [ 2 ]

2 голосов
/ 09 марта 2020

Ваш веб-клиент вызывает изображения с помощью

https://deathless-studio.herokuapp.com/IMAGES/Shop-Pics-Logo.jpg

вместо

https://deathless-studio.herokuapp.com/Images/Shop-Pics-Logo.jpg

(Попробуйте ссылки. Как вы можете видеть изображения там. Просто указанный путь было неверно.)

Если вы нажмете F12 или ctrl + shift + i и откроете вкладку сети, вы увидите ошибочные вызовы API:

enter image description here

А это ваш git репозиторий:

enter image description here

0 голосов
/ 09 марта 2020

Это невозможно только с Heroku. Поскольку файловая система Heroku эфемерна
https://help.heroku.com/K1PPS2WM/why-are-my-file-uploads-missing-deleted

Вы можете использовать

  1. Загрузка файла S3
    https://devcenter.heroku.com/articles/s3-upload-node
  2. Дополнительные дополнения
    https://elements.heroku.com/addons/cloudinary

Удачи:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...