javascript - 当背景图像为空时回退背景颜色

Question

创建一个React组件，我试图在其中使用css属性background-color来回退，background-image因为我可以在此处null看到 SO 帖子之一。该代码仅在有任何图像时才有效，但当没有图像时它不会回退并显示错误。我错过了什么？background-colorundefined:1 GET http://localhost:3000/undefined 404 (Not Found)

const BoxModule = ({
  backgroundColor,
  BackgroundImage,

}) => {

const imageFormats = BackgroundImage?.formats;
const imageSrc = formatImage({ formats: imageFormats });

if (!BackgroundImage || !BackgroundImage?.url) {
  return null;
}

return (
 <Section
   backgroundColor={backgroundColor}
   backgroundImageUrl={imageSrc}
 >
 ...
 </Section>
); 

export default BoxModule;
 
const Section = styled(Section)`
  background-color: ${(p) => p.backgroundColor};
  background-image: ${(p) => `url('${p.backgroundImageUrl}')`};
  background-repeat: no-repeat;
`;

[更新错误跟踪]

我只能看到如下所示的错误：

这个错误是因为代码试图处理image由于null值而失败的，因此不会回退到bacground-color？

Answer 1

实际上，代码足以回退到background-color. 问题不是这个，是别的。因此，要回答这个特定问题，以下代码就足够了。甚至不需要对background-image.

const Section = styled(Section)`
background-color: ${(p) => p.backgroundColor};
background-image: ${(p) => `url('${p.backgroundImageUrl}')`};
background-repeat: no-repeat;
`;