React | How can i display my image in React?

Question

How can i display my image in react?

i know this is a basic question but im really having hard time just displaying my images. in some framework i can store it on asset folder but how can i do this in react js?

I call my images on App.js component by calling this way.

import macbookPiso from './images/design/macbookPiso.png';

<div class="macbook">
   <img src={macbookPiso.png }/>
</div>

Answer 1

You need to use require

<div class="macbook">
   <img src={require("./images/design/macbookPiso.png") }/>
</div>

Answer 2

Just put the image path in src attribute with require call

<img src={require('./images/design/macbookPiso.png')}/>

or using your way

var  macbookPiso  = require './images/design/macbookPiso.png';

<div class="macbook">
   <img src={macbookPiso }/>
</div>

Answer 3

When you use create-react-app, you can also import the image and store in a variable.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;