CODEWITHSUNDEEP
reactjsimagewebpack
Andrew Lastrapes
Andrew Lastrapes

Reputation: 187

React: Displaying images from api call

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;

Upvotes: 0

Views: 2972

Answers (2)

varoons
varoons

Reputation: 3887

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

Upvotes: 1

Smarticles101
Smarticles101

Reputation: 1926

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;

Upvotes: 1

Related Questions