Question

我有一个使用背景图像参数的组件（实际上是一个函数）：

const Card = function(image){
    return(
        <div className="card" 
             style={{backgroundImage: 'url(../../static/assets/' + image + ')',
                     backgroundSize: 'cover',
                     backgroundPosition: 'center center',
                     backgroundRepeat: 'no-repeat'}}>

        </div>
    )
}

我这样调用该函数：

const Content = () => {
    return(
        <div className="content">
            {Card("pie-specialty.jpg")}
            {Card("pie-catering2.jpg")}
            {Card("pie-logo.png")}

        </div>
    )
}

但实际上只有第一张和第三张图片会加载。

我将所有图像都放在同一个文件夹中，可以在文件夹中看到它们，检查了拼写，刷新了文件夹，没有任何反应。

为什么不加载第二张图片？

在文件夹中总共6张图像中，第一张和第三张图像也是唯一加载的图像。

Answer 1

尝试一下：

const Card = function(props){
    return(
        <div className="card" 
             style={{backgroundImage: 'url(../../static/assets/' + props.image + ')',
                     backgroundSize: 'cover',
                     backgroundPosition: 'center center',
                     backgroundRepeat: 'no-repeat'}}>

        </div>
    )
}


const Content = () => {
    return(
        <div className="content">
            <Card image="pie-specialty.jpg"/>
            <Card image="pie-catering2.jpg"/>
            <Card image="pie-logo.png"/>

        </div>
    )
}

您可以将Card组件用作JSX元素。无需{{Card}}

反应不渲染函数调用的背景图像

1 个答案: