how to get image in react js code example
Example 1: showing an image in react js
import image from './path-to-image';
<img src={image} height={100} width={100} />
Example 2: import img react
import shoe1 from './img/shoe_01.jpg'
const Shoe = (e) => {
return (
<div className="shoe-container">
<img src={shoe1} alt=""/>
</div>
);
}
Example 3: img src in react js
import Logo from “./logo.png”;
<img src={Logo}/>
Example 4: how to load image in react js
//How to import an image in react js
import image from './image-path';
<img src={image} alt="Write something here" />
Example 5: import img react in another file
//import imgs in a different js file
import lostImage from './assets/img/illustrations/lost.svg';
export { lostImage };
//import in the component to use it
import {lostImage} from './images.js'
Example 6: get an image from an array react
// images.js
const images = [
{ id: 1, src: './assets/image01.jpg', title: 'foo', description: 'bar' },
{ id: 2, src: './assets/image02.jpg', title: 'foo', description: 'bar' },
{ id: 3, src: './assets/image03.jpg', title: 'foo', description: 'bar' },
{ id: 4, src: './assets/image04.jpg', title: 'foo', description: 'bar' },
{ id: 5, src: './assets/image05.jpg', title: 'foo', description: 'bar' },
...etc
];
export default images;