Question

我使用的是方阵。我确实设法从阵列中获取了数据，但后来的api不会显示图片。

http://tinypic.com/view.php?pic=33avsef&s=9#.XDB96FxKjIU --->如您所见，控制台从阵列中获取了数据，但不会显示。

这是我希望得到的： http://tinypic.com/view.php?pic=f9l46&s=9#.XDDcP1xKjIU

这是我的代码：

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

在您的问题中发布代码示例时，请不要删除代码，还请确保其更具可读性。欢迎使用stackoverflow！

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

png API不会显示图片（React jS）

1 个答案: