Реагируйте: Отображение изображений из вызова API

Question

Я пытаюсь отобразить изображения, полученные при вызове API. Я получаю:

Uncaught Ошибка: не удается найти модуль '"https://i.ebayimg.com/thumbs/images/g/gw8AAOSwgsxagkvP/s-l225.jpg"'

Без require я не получаю предупреждения, но ничего не рендерится.

консоль, записывающая переменную pic ниже: «https://i.ebayimg.com/thumbs/images/g/gw8AAOSwgsxagkvP/s-l225.jpg"

Я читал, что мне нужно импортировать картинки, но не знаю, как мне это выполнить.

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;

Answer 1

Вам не нужно require изображение.Просто установите imageUrl в качестве атрибута src.

Вам также необходимо изменить тег div на тег img.

Следующее должно работать отлично:

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;

Answer 2

Зачем вам изображение.

Просто используйте URL-адрес изображения для атрибута src

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