我正在尝试创建一个react组件,它有一个背景图片,由JSON提供作为url,这个JSON里面有多个对象,其中一个(我们称之为imgObj
)有url(imgObj.url
)。
现在,我想使用该url作为背景图像,但失败得很惨。
这是我想做的
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
background-image: `url(${props => props.imgObj.url})` // this is where I think the problem is
`;
const Component = ({ imgObj, otherStuff }) => (
<Container>
{otherStuff}
</Container>
);
export default Component
我尝试了background-image
行的几种不同的变体,但都不能正确使用。
我在这里使用的是样式化组件,但老实说,我对任何可行的解决方案都很满意。
5条答案
按热度按时间vwhgwdsa1#
对于需要使用样式化组件的解决方案的其他任何人
原因是你忘了在容器样式的组件中插入
imgObj
属性,所以组件不知道在哪里可以找到props.imgObj
。anauzrmj2#
我没有使用
styled-components
,但是你可以在react中定义背景图像为内联样式,如下所示:knsnq2tg3#
你的background-image值周围有一个反勾号,记住样式化组件生成实际的CSS,所以这不会生成有效的CSS值。
此外,我建议您在URL周围加上引号,以避免不好的意外:
所以总而言之,不要忘记您正在生成的是实际的CSS,如果可能的话,不要忘记分号(尽管分号通常是自动完成的,如果它们丢失了,请注意您正在插入的内容:)
9njqaruj4#
如果
imgObj
未定义,则background-image
根本不会被渲染。8zzbczxx5#
如果有人正在寻找使用 typescript 和样式化组件的解决方案,