Question

我正在使用反应揭示并执行图像向上滑动过渡，但是图像未显示，我给出了下面的代码以及输出图像。我添加了一张图片，显示正在发生的事情。图片中的链接应该是图片，但仅显示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]

Answer 1

假设您尝试从Reveal导入正确的组件：

import Reveal from 'react-reveal/Reveal';

查看文档：{{3}}

反应显示图像幻灯片

1 个答案: