时间戳

首页 > 解决方案 > 反应不从函数调用渲染背景图像

reactjs - 反应不从函数调用渲染背景图像

问题描述

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

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 张图像中唯一加载的图像。

标签： reactjs

解决方案

尝试这个：

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

您可以像使用 JSX 元素一样使用 Card 组件。不需要 {{Card}}

推荐阅读