带有样式化组件的React.js中的动态背景图像
带有样式化组件的React.js中的动态背景图像
提问于 2018-03-06 18:02:26
我正在尝试制作一个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行的变体，但都不能正确使用。
我在这里使用的是样式组件，但老实说，我对任何有效的解决方案都很满意。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-07-13 23:53:25
对于其他需要该解决方案的人，请使用样式化组件
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
background-image: `url(${props => props.imgObj ? props.imgObj.url : 'PLACEHOLDERIMG.png'})` // this is where I think the problem is
`;
const Component = ({ imgObj, otherStuff }) => (
<Container imgObj> // <=== Here is where the problem actually is!
{otherStuff}
</Container>
);
export default Component原因是您忘记将imgObj道具插入到容器样式组件中。因此组件不知道在哪里可以找到props.imgObj。
Stack Overflow用户
发布于 2018-03-06 18:27:10
我没有使用过styled-components，但是你可以在react中将背景图片定义为内联样式，如下所示：
...
<div style={{backgroundImage: `url(${props.imgObj.url})`}} >
</div>
...Stack Overflow用户
发布于 2018-03-06 18:44:57
在“背景-图像”值周围有反刻度标记。请记住，styled component会生成实际的CSS，所以这不会生成有效的CSS值。
另外，我建议你在你的URL后面加上引号，以避免不好的惊喜：
const Container = styled.div`
background-image: url('${props => props.imgObj.url}');
`;所以总而言之，不要忘记你正在生成的是实际的CSS，如果可能的话，不要忘记分号(尽管分号通常是自动补全的，如果它们丢失了，要小心你插入的内容:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49128107
复制相关文章
相似问题
腾讯云开发者
