如何设置正确的src路径（GET localhost获取404（未找到））？

Question

我已经设置了ReactJS和Webpack。我正确设置src路径但我仍然得到以下错误，我似乎无法弄清楚为什么。尝试了所有，例如./，/，.. /等。该图像被称为practiceImage.jpg，它位于公共文件夹内的媒体文件夹中。

为什么找不到它？什么应该是正确的道路？

在我的home-page.js页面文件夹中：

  <div>
    <img src="../../public/media/practiceImage.jpg"
      style={{width: '100%', height: '100%'}}
    />
  </div>

然而，没有任何渲染，我在浏览器上获得了损坏的图像并且错误GET http://localhost:8080/public/media/practiceImage.jpg 404 (Not Found)

是我的目录树：

enter image description here

Answer 1

您应该包装webpack可以在require()次调用中处理的文件路径。

<img src={ require( "../../public/media/practiceImage.jpg" ) } ...

进一步阅读：http://blog.andrewray.me/webpack-when-to-use-and-why/