Изображения не отображаются на размещенном сайте

Спасибо, что нашли время посмотреть на это, я исследовал как мог, но ничего не придумаю. Я видел похожий пост о переполнении стека о ожидании обработки изображений, но я ждал около 2,5 часов, а изображения все еще отсутствуют.

Я использую angularfire с Firebase. Я использую grunt build для создания папки dist, и это то, что я развертываю в Firebase. Папка dist содержит папку с изображениями, и firebase сообщает, что загружает 780 файлов при развертывании (до того, как я добавил изображения, было около 25).

Тем не менее, изображения просто не появляются. Шаблон URL - это my-app.firebaseapp.com/images/image-name.jpg.

Мой файл firebase.json показан ниже, он довольно простой.

{
  "firebase": "<redacted>",
  "public": "dist",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Само приложение разворачивается просто отлично и работает, все изображения просто 404ing. Я заранее прошу прощения за то, что я предполагаю, что-то очень основное, что я скучаю.

2 ответа

После миллионного повторного развертывания, но безрезультатно, я решил, что должен устранить неполадки и выяснить, в чем дело. Я проверил URL-адрес файла, т.е. https://exampleApp.firebaseapp.com/img/myimg.png или что бы то ни было в вашем случае. По сути, моей проблемой была просто чувствительность к регистру. Таким образом, вместо myimg.png файл был сохранен как myimg.PNG. Так что просто проверьте, является ли это расширение вашей проблемой.

Это, вероятно, потому что src, rel, а также href теги содержат absolute urls, который вызывает проблемы с firebase при получении нужного файла. Что вы должны сделать, это получить все URL-адреса, чтобы быть относительными, например: images/image1.pngВы должны сделать это даже с вашим css а также js ссылки. Кроме того, вы должны хранить каждую вещь в папке с именем public, или вам придется изменить имя на ваш каталог, когда появится запрос в командной строке относительно использования определенного каталога в качестве публичного.

Итак, я вроде решил проблему. Imagemin Grunt во время процесса сборки сделал что-то с изображениями, которые заставили их не отображаться. Я выясню, что в конечном итоге и, надеюсь, не забуду обновить этот пост на случай, если другие столкнутся с этим в будущем. Но в то же время просто замена папки со встроенными изображениями на исходные исправила проблему.

Другие вопросы по тегам