javascript - 无法使用 webpack 配置访问公共文件夹中的图像

Question

• 这个问题似乎与 webpack 配置有关，因为当我们为 webpack 提供服务时，会为开发环境创建捆绑/虚拟副本，并且由于图像不存在，它显示损坏的图标。
• 我无法从反应组件中的公用文件夹访问图像。
• 我现有的反应应用程序现在与 webpack 集成，一切正常，除了图像。

我想通过使用url而不是使用import语句来使用图像。

预期方式： <img src={"/images/logo.png"} alt="logo" className={classes.logo} />

不期望： import logo from '../../../public/images/logo.png'

以下是我的应用程序结构，请让我知道用于开发和生产环境的加载器或配置或任何更好的方法？

这是我用于开发的 webpack 配置。

提前致谢 ：）

标签： javascriptreactjswebpackwebpack-dev-server

Answer 1

尝试这个

 <img src={process.env.PUBLIC_URL + '/yourPath.jpg'} /> 

或者这也应该有效

<img src={window.location.origin + '/yourPath.jpg'} />