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!

CodePudding user response：

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

CodePudding user response：

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