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}/>