React: Displaying images from api call

Question

I'm trying to display the images at I get from an api call. I'm getting:

Uncaught Error: Cannot find module '"https://i.ebayimg.com/thumbs/images/g/gw8AAOSwgsxagkvP/s-l225.jpg"'

Without require, I'm not getting a warning, but nothing is rendering.

console logging the pic variable below displays: "https://i.ebayimg.com/thumbs/images/g/gw8AAOSwgsxagkvP/s-l225.jpg"

I've read that I need to import the pics, but don't know how I should execute that.

class SingleItem extends Component {
constructor(props){
    super(props);
}
render(){
    const { image: imageUrl  } = this.props.value;
    let img = Object.values(imageUrl).toString()
    let pic = `"${img}"`
    var image = require(pic)
    return (
        <div>
            <div src={image}></div>
        </div>
    )
   }
 }

export default SingleItem;

You have a div rather than an img. Could that be the problem? Also, you won’t need require for absolute urls. — Steve Holgado
– Steve Holgado, Commented Jan 22, 2019 at 19:00

Smarticles101 · Accepted Answer · 2019-01-22 19:07:50Z

1

You don't need to require the image. Just set the imageUrl as the src attribute.

You also need to modify the div tag to an img tag.

The following should work great:

class SingleItem extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { image: imageUrl } = this.props.value;
        let img = Object.values(imageUrl).toString()

        return ( 
            <div>
                <img src = {img}/> 
            </div>
        )
    }
}

export default SingleItem;

answered Jan 22, 2019 at 19:07

Smarticles101

1,9361 gold badge16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

varoons · Accepted Answer · 2019-01-22 20:11:56Z

1

Why are you requiring the image.

Just use the image url for the src attribute

render(){
    const { image: imageUrl  } = this.props.value;
    let img = Object.values(imageUrl).toString()
    return (
        <div>
            <img src={img}></img>
        </div>
    )
   }
 }

edited Jan 22, 2019 at 20:11

answered Jan 22, 2019 at 19:01

varoons

3,8871 gold badge18 silver badges21 bronze badges

Collectives™ on Stack Overflow

React: Displaying images from api call

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related