The webpage display is fine otherwise. but the images show up like this.
my code is <img src = {props.imageUrl} /> and console.log(prop) returns
{...imageUrl: "https://unsplash.com/photos/3PeSjpLVtLg"...}
What could be the problem? Thank you!
The url is a web page. It is not a url to an image so an image tag won't be able to display it. In the case of this specific image, you want the url to be this:
https://images.unsplash.com/photo-1601439678777-b2b3c56fa627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
Try adding the require to the src image like this:
<img src = { require(props.imageUrl)} />
Another way around would be in the props adding the require :
Example:
const slides = {
imageUrl: require('url'),
}
and leave your code as it is in the <img src = {props.imageUrl} />