Блог

Главная - Вопросы по программированию - Изображения, не отображаемые в React

Изображения, не отображаемые в React

#html #css #reactjs #image

Вопрос:

Я прочитал несколько источников и даже попытался в значительной степени скопировать этот codesandbox, но, похоже, это мне совсем не помогло.

Структура файла

 src
  icon.gif
  App.jsx
  index.js
  styles.css

компонент

 export default function App() {
  return (
    <div className="App">
      <img src="src/img/icon.gif" alt="icon" />
    </div>
  );
}

Вот моя песочница, с которой можно поиграть

Комментарии:

1. Реакция не имеет никакого отношения к тому, отображается изображение или нет. Проверьте вкладку «Сеть», и я готов поспорить, что ваш URL неверен или ваше изображение находится не там, где вы думаете. Ваша файловая структура ничего нам не говорит, если мы не знаем, как обслуживаются файлы.

2. Если вы используете react-скрипты для запуска своего проекта, вам понадобится public папка, если вы хотите размещать изображения локально. Как и в связанном вами окне codesandbox, вам нужна public папка на верхнем уровне каталога вашего проекта со следующей структурой, чтобы ваше изображение работало: public/src/img/icon.gif .

3. @Deadron добавил мою ссылку на песочницу

4. @DennisG. добавлена моя ссылка на песочницу

Ответ №1:

Переместите свое изображение в общую папку и сошлитесь на него по пути /icon.gif

Чтобы ссылаться на изображение, изображение должно быть доступно напрямую по протоколу http. Вот для чего существует ваша общая папка, чтобы содержать эти ресурсы и делать их доступными. Ваша папка src должна содержать только исходные файлы, такие как JavaScript и в данном случае CSS.

Комментарии:

1. Потрясающе! Не понимаю, почему вы не сможете ссылаться на все, что вам нравится…

2. Вы можете ссылаться на все, до чего действительно можете дотянуться. На веб-странице это почти всегда означает ресурсы, доступные через http. Чтобы получить доступ к чему-либо через http, вам нужен http-сервер, чтобы сделать этот ресурс доступным вне вашей файловой системы. В используемой вами настройке он запускает веб-сервер, но затем обслуживает только результирующий файл/файлы пакета js, а также файлы в общей папке. Вы не можете получить доступ ни к чему другому, не изменив конфигурацию веб-сервера. Это проблема с использованием приложения react create. При его использовании существует много скрытых сложностей.

Метки: ,