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

Question

[Jusss]

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

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

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 конфиге что-то не то, но вроде все норм, и вообще не должно влиять

Answer 1

[AnnaBam]

кладем изображения в папку public и обращаемся к ним просто по названию файла img src= " .... "

Comments

[goliath_a]

помогло

Answer 2

[kruvv]

В файле где лежит тег img, сделайте импорт Вашего изображения, а потом в src обращайтесь к этому импорту.

Answer 3

[Victor Oberemko]

Jusss, а что пишет в пути для src, если посмотреть обычный DOM?

Comments

[Victor Oberemko]

Можно попробовать указать путь "./dev.png"

Answer 4

[Shane Matte]

Webpack будет читать из папки public, которую указал, при добавлении файлов прописывай всегда ./