我正在使用create-react-app。我试图从我的src/components内部的文件中调用我的公共文件夹中的图像。我收到这个错误信息。

./src/components/website_index.js模块未找到:你试图 import ../../public/images/logo/WC-BlackonWhite.jpg 在项目src/目录之外。国外的相对进口 Src /不支持。您可以将它移动到src/,或者添加一个 从项目的node_modules/到它的符号链接。

从“../../public/images/logo_2016.png”导入logo; <img className="Header-logo" src={logo} alt=" logo" />

我读过很多东西,说你可以做一个导入的路径,但这仍然不是为我工作。任何帮助都将不胜感激。我知道有很多这样的问题,但他们都告诉我导入标志或形象,所以很明显,我在大局中遗漏了一些东西。


当前回答

如果你想从公共目录访问CSS文件,你可能会遇到OUTSIDE OF SOURCE DIRECTORY错误

或者,您可以在index.html中链接此文件,该文件也位于公共目录中。

<link rel="stylesheet" href="App.css">

其他回答

如果你的图片在公共文件夹中,那么你应该使用

"/images/logo_2016.png"

在<img> SRC中,而不是导入

'../../public/images/logo_2016.png'; 

这是可行的

<img className="Header-logo" src="/images/logo_2016.png" alt="Logo" />

公共文件夹内的图像

  use image inside html extension
  <img src="%PUBLIC_URL%/resumepic.png"/>

  use image inside  js extension
  <img src={process.env.PUBLIC_URL+"/resumepic.png"}/>

使用图像在js扩展

如果你想使用CSS设置背景图像。因此,您必须使用本地主机的URL设置图像并添加图像的路径。请看下面的例子。

.banner {
  width: 100%;
  height: 100vh;
  background-image: url("http://localhost:3000/img/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

您不需要弹出,您可以使用rescripts库修改react-scripts配置

这样就可以了:

module.exports = config => {
  const scopePluginIndex = config.resolve.plugins.findIndex(
    ({ constructor }) => constructor && constructor.name === "ModuleScopePlugin"
  );

  config.resolve.plugins.splice(scopePluginIndex, 1);

  return config;
};

把@Flaom写的评论放在这里,标记为回复答案,这实际上挽救了生命:

“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做,你可以从src文件夹外导入,而不用经历弹出应用程序的痛苦。”

Flaom

编辑添加了一些更多的信息@cigien请求。

上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时,我们不能使用公共文件夹中的图像。我自己也有这个问题,读了所有这些答案,我意识到,答案说的是“黑”应用程序,以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说,这是可以的。

就我个人而言,我不希望在我自己的项目中添加改变应用概念的解决方案,特别是在商业项目中。@Flaom解决方案是最简单的,如果将来有任何变化,它可以被另一个解决方案取代。它没有任何风险,可以随时移除,是最简单的。