Images not showing on localhost (React) How to fix?

Question

JavaScript

Good afternoon, the problem is that the images do not open, even if it is in the same folder as the component itself ... In fact, the images are in a completely different folder, but due to the fact that they do not want to open, I started Throw them into the same folder, but it still does not open. I tried a bunch of paths, other formats ...
for example, I set:

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>
      })
    }

In console:
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)
> I use npm, webpack.
If you set, for example, a background from a css file, then the image is displayed, but if you set some img src from the component, then it is not displayed. This is some nonsense. Maybe something is wrong in the webpack config, but everything seems to be normal, and should not affect at all

Answer 1

In the file where the img tag is located, import your image, and then refer to this import in src.

Answer 2

Jusss , but what does it write in the path for src, if you look at the usual DOM?

Answer 3

Webpack will read from the public folder that you specified, when adding files, always write ./

Answer 4

put the images in the public folder and refer to them simply by the file name img src= " .... "