javascript - 如何设置正确的 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)

是我的目录树:

Answer 1

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

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

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