使用样式组件在React.js中导入图像

Question

我正在使用样式组件,我正在尝试设置这样的背景图像

const HeaderImage= styled.div`
    background-image: url('../../assets/image.png');
';

我也试过没有引号,就像这样

const HeaderImage= styled.div`
        background-image: url(../../assets/image.png);
 ';

在这两种情况下,我得到相同的结果

http:// localhost:3000/assets/image.png无法加载资源:服务器响应状态为404(未找到)

我正在使用Richard Kall的反应启动器

该文件肯定在指定的位置.

我加载不正确吗？

我应该提一下,我对此很新(React和样式组件)

Answer 1

您应该按以下方式导入图像(假设您已配置webpack以导入媒体资产).

import myImage from '../../assets/image.png';

/* ... */

const HeaderImage = styled.div`
  background-image: url(${myImage});
`;

Answer 2

编辑：由于误导性的问题标题，此答案在问题标题更新后被编辑。

使用图像作为背景图像 CSS 属性：

import LogoSrc from './assets/logo.png';

/* ... */

const LogoDiv = styled.div`
  background-image: url(${LogoSrc});
  /* width and height should be set otherwise container will have either have them as 0 or grow depending on its contents */
`;

/* ... */

<LogoDiv />

导入和使用图像的正常方式：

import LogoSrc from './assets/logo.png';

/* ... */

const Logo = styled.img`
    width: 30px;
    height: 30px;
    margin: 15px;
`;

/* ... inside the render or return of your component ... */

<Logo src={LogoSrc} />

编辑 2：作为参考，还有另一种使用样式组件的方法，主要用于使用您已经导入的组件（即来自其他组件库的 ant-design 组件）或使用styled._cp_name_符号不起作用的组件。

注意：组件需要与样式组件兼容。

想象一下，您将在文件上导出 Logo 并将其导入到另一个组件文件中：

const Logo = styled.img`
    width: 30px;
    height: 30px;
    margin: 15px;
`;

export default Logo;

然后，在要导入它的文件上，您可以通过以下方式添加更多样式：

import Logo from '../components/Logo';

const L = styled(Logo)`
   border: 1px dashed black;
`;

/* ... then inside render or return ... */
<L />

Answer 3

import logo from 'public/images/logo.jpg';

/* ... */

const HeaderImg = styled.img.attrs({
  src: `${logo}`
})`
width: 50px;
height: 30px;
`;