反应来自另一个文件夹问题的导入组件

Question

我确实添加了文件夹结构，以便您可以看到。

如何将图像组件导入卡组件？不管我尝试哪种方式，都会收到此错误

./src/Components/Card/Card.js
Module not found: Can't resolve '../../Components/Image' in 
'/Users/user/project/projecttest/src/Components/Card'


import React from 'react'
import styled, {ThemeProvider, css } from 'styled-components'
import Image from '../../Components/Image'

Answer 1

否，我看到您正在导入：import Image from '../../Components/Image'。这意味着您要导入index中的Image folder。

但是在您的代码中，您定义的是Image.js而不是index.js。 因此，您必须像这样导入：

import Image from '../Image/Image' 

或者，您可以将文件Image.js重命名为index.js以缩短导入时的代码：

// rename Image.js to index.js
// then, import file:
import Image from '../Image' 

Answer 2

您应该在末尾写上Image或将文件名更改为index.js

import Image from '../../Components/Image/Image'

Answer 3

尝试在反应中导入绝对值。在您的根目录中创建一个.env文件。文件内容

NODE_PATH = src

Answer 4

@Jikun L的答案是正确的。我想知道为什么它不是图像格式。

也许将文件夹结构更改为此：

组件

-卡

--> index.js

--> styles.js

-图片

--> xxx.png

--> package.json

Package.json：

{
    "name": "@image"
}

卡内（index.js）

  <Image
    source={require("@images/xxx.png")}
  />