部署我的 React js 项目时出错

Question

当我尝试部署项目时，我的构建不断失败。错误：

“找不到模块：错误：您尝试导入位于项目 src/ 目录之外的 /home/name/HUMMINGBIRD/hummingbird/src/assets/Heropic.png。不支持 src/ 之外的相对导入。”

但我不明白这个错误，因为提到的文件位于

src

文件夹中，并且当我尝试使用相对路径时，即：

import facebook from "src/assets/facebook.png"

我收到此错误

“找不到模块：错误：无法解析“/home/name/HUMMINGBIRD/hummingbird/src/Components/Footer”中的“src/assets/facebook.png” ./src/Components/Footer/Footer.js 中的错误 6:0-47 找不到模块：错误：无法解析“/home/name/HUMMINGBIRD/hummingbird/src/Components/Footer”中的“src/assets/facebook.png”

我正在使用的部署服务建议使用

symlinks

，但不可否认，我还没有完全理解它们。

我该怎么办？

这就是我在 React 项目中导入图像的方式：

import React from "react";
import "/home/name/HUMMINGBIRD/hummingbird/src/Components/Footer/Footer.css";
import facebook from "/home/name/HUMMINGBIRD/hummingbird/src/assets/facebook.png"; 
import instagram from "/home/name/HUMMINGBIRD/hummingbird/src/assets/instagram.png"; 
import linkedin from "/home/name/HUMMINGBIRD/hummingbird/src/assets/linkedin.png"; 
import twitter from "/home/name/HUMMINGBIRD/hummingbird/src/assets/twitter.png";

Answer 1

看来您导入图像的方式是错误的。 导入图片的方法是从文件位置回到图片位置

例如：

如果我的文件夹结构如下所示：

root
- src
-- assets
--- images
---- myImage.png
-- components
--- MyCustomComp
---- index.jsx
-- pages
-- util
...

因此在index.jsx中，我们将这样从assets文件夹中导入图像：

import myImage from "../../assets/images/myImage.png"

每个

../

都是上一级目录。从index.jsx到assets，我们需要向上两个目录。

../../

，这会将我们放入 src 文件夹中。现在我们可以访问资源文件夹 -> images -> myImage.png

如果文件/图像与index.jsx位于同一文件夹中 - 那么你只需要

./

这不仅适用于图像，也适用于任何其他文件。