0

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';
ravibagul91
  • 20,072
  • 5
  • 36
  • 59
aaayumi
  • 1,224
  • 8
  • 27
  • 47
  • 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 Sep 14 '17 at 13:40
  • Oh my god. It's a silly mistake. It works fine now. Thank you so much! – aaayumi Sep 14 '17 at 13:50

1 Answers1

1

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

import Image from '../Image.png';
K.Dᴀᴠɪs
  • 9,945
  • 11
  • 33
  • 43
zkuzmic
  • 64
  • 4