import image folder in react code example

Example 1: import img react

import shoe1 from './img/shoe_01.jpg'
const Shoe = (e) => {
	return ( 
        <div className="shoe-container">
            <img src={shoe1} alt=""/>
        </div>
    );
}

Example 2: import all images from folder reactjs

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />

Example 3: how to use saved image on react

<img alt="timer" src={require('./images/timer.png')} />

Example 4: React import image with url

import React from 'react';
import ReactDOM from 'react-dom';

const App: FunctionComponent = () => {
  return (
    <img src = {this.props.url} alt='something'/> 
  );
}