javascript - I would like to ask you, when webpack packs images, they cannot be displayed on the page. Do you have any questions about the root directory of the website?

Question

Please give me some advice, brother. First upload the pictures, first the file directory:

Next is the configuration information of the image part of webpack:

The specific problem encountered is: the picture cannot be displayed, and the browser console reports an error saying that the picture cannot be found. I saw in the console code that the path of the image is: http://localhost:3000/images/...;
Because the contentBase set before the site root directory is /views, index.html is also placed in it Yes, at this time I set the contentBase to '/'. The effect I want to achieve is to set the root directory to the same level directory of the webpack configuration file. Index.html is also placed outside the views, and at the same time, the picture folder is also In the root directory, change the image path to ./images/logo.png, but now I can’t find it when I open the browser page;
At this time, I blocked the contentBase, and index.html is still outside, but I still can’t find it. arrive. . .
So I encountered a contradiction:
If the root directory views and images are at the same level, then the pictures will not be displayed (my guess is that the pictures are not packaged in the root directory), and adjusting the contentBase wants to put the images in the root directory directory, but it doesn’t work. I don’t know how to do it?

Answer 1

//引入图片的姿势不正确，不可以直接这样 ‘../images/...‘;
//要么 
import logo from ‘../images/logo.png’;
<img src={logo} alt=""/>

要么 
<img src={require('../images/logo.png')} alt=""/>

//以上两种随便选

Answer 2

Check your publicPath setting, it is usually set to the root directory ‘/’