React.js 样式组件导入图像并将它们用作 div 背景

Question

我正在使用 styled-components 并尝试像这样设置背景图片

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's react starter

文件肯定在指定位置。

是我加载不正确吗？

我应该提一下，我对此很陌生（React 和样式组件）

Answer 1

您应该按以下方式导入图像（假设您已经配置了用于导入媒体资产的 webpack）。

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

/* ... */

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

Answer 2

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

使用图像 background-image 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: 作为参考，还有另一种使用方法 styled-components，主要用于使用您已经导入的组件（即 ant-design 的组件来自其他组件库）或者在使用 styled._cp_name_ 表示法无法工作的组件的情况下。

注意： 组件需要与 styled-components.

兼容

假设您要在一个文件上导出徽标并将其导入另一个组件文件:

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;
`;

Answer 4

导入文件是上面建议的一种方法，但这不是唯一的方法。

这是一个替代解决方案，引用文件路径，原始方式，使用自定义快速扩展来定位您的 dist 文件夹。（我个人更喜欢这种方法，因为它使 css 从 jsx 中保持干净并且是自读的）

免责声明： 此解决方案用于 webpack-dev-server 的测试，但一旦部署代码，只要您使用 dist 文件夹生成资产，它就会默认工作。

示例：

component.tsx

const Button = styled.button`
  background: url('/assets/file.svg');
`

webpack.config.js

const dist = path.resolve(__dirname, 'dist');
{
  devServer: {
    contentBase: dist,
    historyApiFallback: true,
    before: app => {
      app.use('/assets', express.static(path.resolve(dist, '/assets')));
    }
  }
}

React.js 样式组件导入图像并将它们用作 div 背景

React.js styled-components importing images and using them as div background

reactjs

styled-components