我正在使用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" />

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


当前回答

这可以直接完成,而无需使用公共文件夹的路径。 你可以这样做

<img src="/images/image-name" alt=""/>

这是因为我们没有在浏览器中使用App.js。由于index.html是在浏览器本身执行的,图像的路径已经在包含index.html文件的公共文件夹中

其他回答

在制作《Truffle》时,我不得不克服同样的问题。解决方案如下:

由于Create-React-App的默认行为不允许从src文件夹外导入文件,我们需要将build文件夹中的合同带到src内。我们可以在每次编译合同时复制并粘贴它们,但更好的方法是简单地配置Truffle将文件放在那里。

在“truffle-config.js”文件中,替换如下内容:

const path = require("path");

module.exports = {
  contracts_build_directory: path.join(__dirname, "client/src/contracts")
};

我不知道这是否对你有帮助,但我知道当我在Truffle中遇到同样的问题时,我发现了你的问题,这可能会帮助其他人。

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

"/images/logo_2016.png"

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

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

这是可行的

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

在我的项目中遇到了同样的问题,并在官方的create-react-app文档中找到了这个:https://create-react-app.dev/docs/using-the-public-folder/

有一个“逃生舱口”可以在模块系统之外添加资产:

如果您将文件放入公用文件夹,则它将不会被处理 webpack。相反,它将原封不动地复制到构建文件夹中。来 在公用文件夹中引用资产时,需要使用环境 变量PUBLIC_URL。

下面是他们提供的一个例子:

呈现(){ //注意:这是一个逃生口,应该谨慎使用! //通常我们建议使用' import '来获取资产url //如上面“添加图像和字体”所述。 返回<img src={process.env。PUBLIC_URL + '/img/logo.png'} />; }

有一些答案提供了react-app-rewired的解决方案,但customize-cra包括一个removeModuleScopePlugin() API,它更优雅一些。(这是相同的解决方案,但被customize-cra包抽象了。)

NPM I——save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

您可以尝试使用simlinks,但是相反。

React不会遵循simlink,但是你可以将一些东西移动到源目录,并创建一个simlink到它。

在项目的根目录中,我有一个节点服务器目录,其中有几个模式文件。我想在前端使用它们,所以我:

移动文件/src 在终端,我cd到哪里模式文件属于服务器 ln -s SRC_PATH_OF_SCHEMA_FILE

这为react提供了它所需要的东西,node也很乐意通过simlinks包含文件。