Image Loading Error React Create React App

Question

I want to upload images from files in my React application (I use create-react-app).It didn't show up and the error message appeared in the terminal.

I tried the proposed solution in the following questions but It didn't work out for my app.

React won't load local images

Dynamically Add Images React Webpack

The error message is

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>
    );
  }
 }

File structure

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

Edited Thanks to Chris's comment, it figure it out that just one comma was missing in import area.

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

if ./ resolves to /Users/ayumi/my-app/src/components and your image is one level higher, just import it like../Image.png. So just add another .. — Chris
– Chris, Commented Sep 14, 2017 at 13:40
Oh my god. It's a silly mistake. It works fine now. Thank you so much! — aaayumi
– aaayumi, Commented Sep 14, 2017 at 13:50

K.Dᴀᴠɪs · Accepted Answer · 2018-05-10 20:56:36Z

1

You need to go up a directory to import your png like so:

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

edited May 10, 2018 at 20:56

K.Dᴀᴠɪs

10.1k13 gold badges36 silver badges46 bronze badges

answered May 10, 2018 at 14:34

zkuzmic

644 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Image Loading Error React Create React App

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related