Изображения исчезают в производственной сборке React, потому что создается неправильный путь

это мой первый пост здесь.
У меня проблема с тем, как генерируются пути производственной сборки к моим изображениям, когда я запускаю npm run build.

У меня есть несколько логотипов для отображения в одном из моих компонентов React, которые правильно отображаются на локальном сервере... проблема возникает при развертывании в Netlify.

Это код, который я использую для их динамического получения:

currentProject.icons.map(el => {
  return (
    <div key={el.id} className={styles.logo}>
      <div
        className={styles["logo-wrap"]}
        style={{ margin: ".3rem 0" }}
      >
        {el.icon}
        <p>{el.tag}</p>
      </div>
    </div>
  );
})}

Это результат на локальном хосте:
Logos locahost

Но это результат в производстве:
Production build logos

Теперь я заметил, что в производственной сборке изображение src неверно (./ вместо ../), так как когда я изменяю путь в devtools, появляется правильное изображение.

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

До:
enter image description here

После того, как я добавлю . к пути к файлу:
enter image description here

Это структура папок:
enter image description here

Прямо сейчас я просто тестировал логотип React, но раньше я также пытался импортировать их из src/assets/Logos, но результат тот же на локальном хосте.

Как я могу решить эту проблему?

Не могли бы вы добавить структуру папок, пожалуйста?

Anindya Dey 23.04.2022 14:20

Эй, Аниндия, я только что отредактировал исходный вопрос.

Fra 23.04.2022 16:55

Я столкнулся с той же проблемой и смог решить ее, только импортировав фотографии непосредственно в компонент, в котором они были нужны. Пример: import jsIcon from '../media/JS_Icon123.svg'

Thenlie 23.04.2022 17:06

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

Fra 23.04.2022 17:39
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
4
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил это. По-видимому, несмотря на то, что в моей производственной сборке Netlify был файл __redirects, указывающий, что точкой входа была /* /index.html 200, для правильной работы всех подмаршрутов React Router мне не хватало <base href="/" /> в тегах <head> в public/index.html.

Добавление этого исправило пути к изображениям и некоторые проблемы с подмаршрутизацией (например, доступ к ним напрямую по ссылке).

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