Display an image from url in ReactJS

As you do in HTML

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

 function App() {
   return (
     <img 
      src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
      alt="new"
      />
   );
 }

 const rootElement = document.getElementById("root");
 ReactDOM.render(<App />, rootElement);

To solve this;

For local images:

Use an import statement No need to pollute the public folder

import slideImg1 from '../../assets/pexels-pixabay-259915.jpg';

Then use in Jsx like this

    const solveLocalImg = () => (
<img src={slideImg1}/>

//or

<div data-src={slideImg1}>
      </div>
)

For online images

Use an array

let imgs = [
  'https://res.cloudinary.com/stealthman22/image/upload/v1586308024/new-portfolio/hero/time-lapse-photography-of-waterfalls-during-sunset-210186.jpg',
  'https://res.cloudinary.com/stealthman22/image/upload/v1586308023/new-portfolio/hero/two-cargo-ships-sailing-near-city-2144905.jpg',
];

 const solveOnlineImg = () => (
<div>
<img src={imgs[0]}/>
<img src={imgs[1]}/>
</div>
)

You can use as many images as you like with the second method. It even makes it easy for you to manage your images. Hopefully, soon enough we'd either get a solution that can make us do things how we are used to with just HTML CSS and js

For now, we are stuck with amazing Webpack

Yes. it is possible. just use <img /> tag.

<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350">

You can use tag for displaying the image.If the image source is in props/state use <img src={this.props.url}/>