Вопрос или проблема
Я пытался развернуть проект на React из GitHub, а также вручную, но изображения не отображаются после развертывания. Проект на React был создан с помощью Vite, и, прочитав несколько ответов на форумах, я переместил его в папку public, но это не принесло результатов. Мой репозиторий: https://github.com/SamarthTripathi-Design/FrontEndMentor-Challenges/tree/main/interactive-comments-section Развернутая URL: https://frontend-mentor-interactive-comments.netlify.app Мог бы кто-нибудь сказать, что я делаю не так? При запуске npm run build изображения присутствуют в папке dist введите описание изображения здесь
Папка public обслуживается как статическая, поэтому во время сборки содержимое public перемещается в корень выходных данных сборки (dist). Решение будет заключаться в использовании абсолютного пути для ресурсов, например, я нашел в вашем коде следующее:
<div className="comment__card-section1">
<div className="comment__card-img1-container">
<img src="../../public/images/icon-plus.svg" alt="icon-plus" />
</div>
<span className="comment__card-number">{score}</span>
<div className="comment__card-img1-container">
<img src="../../public/images/icon-minus.svg" alt="icon-minus" />
</div>
</div>
Измените это на следующее:
<div className="comment__card-section1">
<div className="comment__card-img1-container">
<img src="/images/icon-plus.svg" alt="icon-plus" />
</div>
<span className="comment__card-number">{score}</span>
<div className="comment__card-img1-container">
<img src="/images/icon-minus.svg" alt="icon-minus" />
</div>
</div>
Это не будет работать в dev, поэтому я думаю, что решение этой проблемы заключается в использовании BASE_URL, предложенного Vite (import.meta.env.BASE_URL), и сделать что-то вроде:
<div className="comment__card-section1">
<div className="comment__card-img1-container">
<img src=`${import.meta.env.BASE_URL}images/icon-plus.svg` alt="icon-plus" />
</div>
<span className="comment__card-number">{score}</span>
<div className="comment__card-img1-container">
<img src=`${import.meta.env.BASE_URL}images/icon-minus.svg` alt="icon-minus" />
</div>
</div>
Что-то подобное этому, я не тестировал, но должно работать.
Ответ или решение
При развертывании React проекта на Netlify вы столкнулись с проблемой, когда изображения не загружаются. Эта ситуация может быть вызвана несколькими факторами, включая неправильные пути к изображениям. Давайте подробно разберем возможные причины и решения данной проблемы.
Причины проблемы
-
Путь к изображениям:
В вашем коде вы используете относительные пути для загрузки изображений, например:<img src="../../public/images/icon-plus.svg" alt="icon-plus" />Эти пути могут не работать после сборки проекта, так как они зависят от структуры папок, которая меняется при развертывании. Ваша сборка перемещает содержимое папки
publicв корень выходной папкиdist, но относительные пути не будут корректно разрешаться. -
Кеширование в браузере:
Иногда браузеры кешируют старую версию сайта, что может привести к отображению устаревших ресурсов, включая изображения. Это также стоит учитывать при отладке. -
Общие настройки Vite:
Vite позволяет использовать переменные окружения, которые могут помочь вам правильно настраивать пути к ресурсам в зависимости от окружения разработки или развертывания.
Решения
1. Исправление пути к изображениям
Измените пути к изображениям на абсолютные, чтобы они корректно работали после развертывания. Например:
<img src="/images/icon-plus.svg" alt="icon-plus" />Это укажет браузеру искать изображения в корневом каталоге, который будет актуален в собранном проекте на Netlify.
2. Использование переменной окружения BASE_URL
Если вы хотите убедиться в гибкости вашего приложения, используйте переменную окружения import.meta.env.BASE_URL. Она автоматически устанавливается в зависимости от контекста вашего приложения. Вот как это можно сделать:
<img src={`${import.meta.env.BASE_URL}images/icon-plus.svg`} alt="icon-plus" />Это полностью исключит возможность возникновения ошибок при работе как в режиме разработки, так и в собранном проекте.
3. Очистка кеша браузера
Если после внесения изменений изображения все еще не отображаются, попробуйте очистить кеш браузера или открыть проект в режиме инкогнито.
Заключительные рекомендации
Следуйте этим шагам, чтобы убедиться в правильной работе ваших изображений на платформе Netlify. Убедитесь, что вы не забыли про другие аспекты проекта, такие как правильная настройка сборки и конфигурация окружения. Помните, что использование абсолютных путей и переменных окружения поможет вам избежать подобных проблем в будущем.
Если у вас остались вопросы или возникли трудности, проанализируйте консоль разработчика в вашем браузере для выявления возможных ошибок. Это может дать вам более чёткое представление о том, что идет не так.