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 张图像中唯一加载的图像。
解决方案
尝试这个:
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}}
推荐阅读
- flutter - Flutter Dialog 作为单独的文件和类
- node.js - Mocha 测试在本地运行良好,但由于解构语法而在 Travis 上失败?
- java - 在 mousePressed() 之后 keyPressed() 方法不起作用
- r - 引用 r data.table ':=' 中的嵌套列表元素(通过引用赋值)
- python - Python Basemap 脚本使用 Anaconda cmd 提示符运行,但不使用 VS Code
- r - 具有两条独立线性回归线的剂量反应图
- html - CSS - overflow-y 元素不能滚动
- java - 无法通过 @Model 参数进行 junit 控制器测试
- react-native - 如何在 react-native 中重新渲染组件?
- mongodb - Mongodb分组子数组