1<img src={require('./logo.jpeg')} />
2
3import logo from './logo.jpeg'; // with import
4const logo = require('./logo.jpeg); // with require
5<img src={logo} />
1import image from './path-to-image';
2
3<img src={image} height={100} width={100} />
1//if you have images in src folder
2import shoe1 from './img/shoe_01.jpg'
3const Shoe = (e) => {
4 return (
5 <div className="shoe-container">
6 <img src={shoe1} alt=""/>
7 </div>
8 );
9}
10//if you have images in public folder:
11//will look in folder /public/img/shoe_01.jpg
12const Shoe = (e) => {
13 return (
14 <div className="shoe-container">
15 <img src="/img/shoe_01.jpg" alt=""/>
16 </div>
17 );
18}
19
1First method
2import logo from './logo.jpeg'; <img src={logo} />
3Second Method
4const logo = require('./logo.jpeg); <img src={logo.default} />
5Third Method
6<img src={require('./logo.jpeg').default} />
1import React from "react";
2import ReactDOM from "react-dom";
3
4import "./styles.css";
5
6class App extends React.Component {
7 constructor(props) {
8 super(props);
9 this.switchImage = this.switchImage.bind(this);
10 this.state = {
11 currentImage: 0,
12 images: [
13 "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
14 "https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNC84MzAvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzExMTA1NzIxNTkuanBn",
15 "https://d17fnq9dkz9hgj.cloudfront.net/uploads/2012/11/152964589-welcome-home-new-cat-632x475.jpg",
16 "https://i.ytimg.com/vi/jpsGLsaZKS0/maxresdefault.jpg"
17 ]
18 };
19 }
20
21 switchImage() {
22 if (this.state.currentImage < this.state.images.length - 1) {
23 this.setState({
24 currentImage: this.state.currentImage + 1
25 });
26 } else {
27 this.setState({
28 currentImage: 0
29 });
30 }
31 return this.currentImage;
32 }
33
34 componentDidMount() {
35 setInterval(this.switchImage, 1000);
36 }
37
38 render() {
39 return (
40 <div className="slideshow-container">
41 <img
42 src={this.state.images[this.state.currentImage]}
43 alt="cleaning images"
44 />
45 </div>
46 );
47 }
48}
49const rootElement = document.getElementById("root");
50ReactDOM.render(<App />, rootElement);