对于需要使用样式化组件的解决方案的其他任何人

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。

我没有使用styled-components，但是你可以在react中定义背景图像为内联样式，如下所示：

...
<div style={{backgroundImage: `url(${props.imgObj.url})`}} >
</div>
...

你的background-image值周围有一个反勾号，记住样式化组件生成实际的CSS，所以这不会生成有效的CSS值。
此外，我建议您在URL周围加上引号，以避免不好的意外：

const Container = styled.div`
  background-image: url('${props => props.imgObj.url}');
`;

所以总而言之，不要忘记您正在生成的是实际的CSS，如果可能的话，不要忘记分号（尽管分号通常是自动完成的，如果它们丢失了，请注意您正在插入的内容：）

如果imgObj未定义，则background-image根本不会被渲染。

import React from 'react'
import styled from 'styled-components'

const Container = styled.div`
  ${props => props.imgObj && props.imgObj.url && 
    `background-image: (${props.imgObj.url})`
  }
`

const Component = ({ imgObj, otherStuff }) => (
<Container imgObj={imgObj}>
    {otherStuff}
</Container>
)

export default Component

如果有人正在寻找使用 typescript 和样式化组件的解决方案，

import styled from 'styled-components';

interface Props {
  imageUrl: string;
}

const Container = styled.div<Props>`
  background-image: url(${(props) => props.imageUrl});
`;