@Jusss

Не отображаются изображения на localhost (React). Как исправить?

Добрый день, проблема в том, что не открываются изображения, даже если оно лежит в той же папке, что и сам компонент... На самом деле изображения лежат совсем в другой папке, но из-за того что они не хотят открываться, начал их уже в ту же папку скидывать, а всеравно не открывается. Испробовал кучу путей, форматы другие...

например задаю:

technologies: [
    {
      name: 'development',
      path: 'dev.png',
      link: '/'
    }
...

{
      this.state.technologies.map(function (res, i) {
        return <a key={i} href={res.link} >
          <img src={res.path} />
          <span class="name">{res.name}</span>
        </a>
      })
    }



В консоле:
Failed to load resource: the server responded with a status of 404 (Not Found) left.png
Failed to load resource: the server responded with a status of 404 (Not Found) settings.png
Failed to load resource: the server responded with a status of 404 (Not Found) process.png
Failed to load resource: the server responded with a status of 404 (Not Found) coding.png
Failed to load resource: the server responded with a status of 404 (Not Found)


>Юзаю npm, webpack.

Если задать, например, из css файла бэкграунд - то картинка отображается, если же прописать какой-то img src из компонента, то не отображается. Бред какой-то. Может в webpack конфиге что-то не то, но вроде все норм, и вообще не должно влиять
  • Вопрос задан
  • 14742 просмотра
Пригласить эксперта
Ответы на вопрос 4
@AnnaBam
кладем изображения в папку public и обращаемся к ним просто по названию файла img src= " .... "
Ответ написан
@kruvv
В файле где лежит тег img, сделайте импорт Вашего изображения, а потом в src обращайтесь к этому импорту.
Ответ написан
Комментировать
Jusss, а что пишет в пути для src, если посмотреть обычный DOM?
Ответ написан
mattedev
@mattedev
web developer
Webpack будет читать из папки public, которую указал, при добавлении файлов прописывай всегда ./
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы