Pixabay不会显示图片(响应jS)

Question

我用的是像素数组。我确实从我的数组中获得了数据，但是像素api不会显示它的图片。控制台从数组中获取数据，但不会显示：

​

​

这就是我希望得到的：

​

这是我的密码：

componentDidMount() {
    fetch("https://pixabay.com/api/?key=11095386-871fd43c33a92700d9bffb82d&q=travel&image_type=photo&pretty=true")
        .then(res => res.json())
        .then(
            (result) => {
                console.log(result)
                this.setState({
                    apiImg: result.hits
                });
            },
            (error) => {
                this.setState({
                    isLoaded: true,
                    error
                });
            }
        )ƒ
} // ---> This is where I fetch my api.

{
    apiImages.map(img => (
        <Card shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
            <a href="/alleblogs">
                <CardTitle style={{ color: '#fff', height: '176px', background: 'url( {  } ) center / cover' }}>Golden Bridge</CardTitle>
                <CardText>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis distinctio esse qui eos, ad provident,
                    </CardText>
                <CardActions border>
                    <Button style={{ color: '#8dd5e8' }}>Likes:</Button>
                    <Button style={{ color: '#8dd5e8' }}>Share</Button>
                </CardActions>
            </a></Card>
    ))
} //---> this is my card

<CardTitle style = {{ color: '#fff', height: '176px', background: 'url( {  } ) center / cover' }}> Golden Bridge</CardTitle > 

我希望有人能帮我这个忙。

Answer 1

请不要删除代码时，张贴在您的问题中的代码示例，也要确保它更易读。欢迎来到堆栈溢出！

您通过largeImageUrl获得的错误是null，因为您正在apiImages上迭代，因此您需要从迭代器中的返回对象获取largeImageProperty --在本例中：img尝试如下：

{
    apiImages.map(img => (
        <Card shadow={5} style={{ minWidth: '450', margin: 'auto' }}>
            <a href="/alleblogs">
                <CardTitle style={{ 
                    color: '#fff', 
                    height: '176px', 
                    backgroundImage: `url(${img.largeImageURL})`, 
                    backgroundPosition: 'center', 
                    backgroundSize: 'cover'
                }}>Golden Bridge</CardTitle>
                <CardText>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis distinctio esse qui eos, ad provident,
                </CardText>
                <CardActions border>
                    <Button style={{ color: '#8dd5e8' }}>Likes:</Button>
                    <Button style={{ color: '#8dd5e8' }}>Share</Button>
                </CardActions>
            </a>
        </Card>
    ))
}