图像加载错误反应创建反应应用程序

Question

我想从我的React应用程序中的文件上传图像（我使用create-react-app）。它没有显示，并且终端中出现错误消息。

我在以下问题中尝试了所提出的解决方案，但它并没有为我的应用程序解决问题。

React won't load local images

Dynamically Add Images React Webpack

错误消息是

Module not found: Can't resolve './Image.png' in '/Users/ayumi/my-app/src/components'

Main.js

import React from 'react';
import Image from './Image.png';


export default class Parent extends React.Component {
render() {
return (
<div>
<img src={Image} alt=""} />
</div>);
 }
 }

文件结构

|-- src
|   ` app.js
|    ` image.jpg
|   `-- components
|      `Main.js

被修改 感谢克里斯的评论，它发现导入区域只丢失了一个逗号。

import React from 'react'; import Image from '../Image.png';

Answer 1

你需要上一个目录来导入你的png：

import Image from '../Image.png';