reactjs React.js中带有样式化组件的动态背景图像

nxowjjhe  于 2023-03-17  发布在  React
关注(0)|答案(5)|浏览(109)

我正在尝试创建一个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行的几种不同的变体,但都不能正确使用。
我在这里使用的是样式化组件,但老实说,我对任何可行的解决方案都很满意。

vwhgwdsa

vwhgwdsa1#

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

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

anauzrmj

anauzrmj2#

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

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

knsnq2tg3#

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

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

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

9njqaruj

9njqaruj4#

如果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
8zzbczxx

8zzbczxx5#

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

import styled from 'styled-components';

interface Props {
  imageUrl: string;
}

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

相关问题