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>
You need to use require
<div class="macbook">
<img src={require("./images/design/macbookPiso.png") }/>
</div>
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>
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;
