How to set up Express middleware image loading?

Question

JavaScript

I came across this Express and I'm trying to get my assembly to work with pictures
Here is the devServer.js file

app.use(require('webpack-hot-middleware')(compiler));

app.use('/static', express.static('public'));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});

Link to the picture <Image src="static/public/thumb.jpg" rounded />
Where am I wrong, why does the path to jpg not match?
Am I placing public in src correctly, because the static is added automatically?

Answer 1

There is no need for public in the link to the image:
Well, it is advisable to write the paths to folders / files through path:

var path = require('path');
app.use('/static', express.static(path.resolve(__dirname, 'public')));

Answer 2

Since webpack is used for assembly, you can use AssetsPlugin

import thumb from './thumb.jpg';

<Image src={thumb} rounded />

The pack itself will configure the path and file name, and from this there is another consequence of putting remurs next to the components where they are used