Reactjs 反应显示图像幻灯片

我正在使用react reveal并进行图像向上滑动转换，但是图像没有显示，我已经给出了下面的代码以及输出图像。我添加了一张图片，显示了正在发生的事情。图片中的链接本应为图像，但它仅显示

link

import React from 'react';
import { Link } from 'react-router-dom';
import Reveal from 'react-reveal';
import 'animate.css/animate.css';

const generateBlocks = ({blocks}) =>{
    if(blocks){
        return blocks.map((item)=>{

            const styles = {
                background:`url('/images/blocks/${item.image}') no-repeat `
            }

            return(
                <Reveal key={item.id} effect="animated fadeInUp"
                className={`item ${item.type}`}>

                 <div className="veil"></div>
                    <div
                        className="image"
                        style={styles} >

                        </div>
                        <div className="title">
                            <Link to={item.link}>{item.title}</Link>
                        </div>
                 </Reveal>
            )
        })
    }

}

const Blocks = (props) =>{
    return(
        <div className ="home_blocks">
            {generateBlocks(props)}
        </div>
    )
}
export default Blocks;][1]

从“React”导入React；
从'react router dom'导入{Link}；
从“反应揭示”导入揭示；
导入“animate.css/animate.css”；
const generateBlocks=（{blocks}）=>{
如果（块）{
返回blocks.map（（项目）=>{
常量样式={
背景：`url（'/images/blocks/${item.image}'）不重复`
}
返回(
{item.title}
)
})
}
}
常数块=（道具）=>{
返回(
{生成块（道具）}
)
}
导出默认块；][1]

您是否尝试从

Reveal

导入正确的组件：

从“反应揭示/揭示”导入揭示；

查看文档：