您应该按以下方式导入图像（假设您已将 webpack 配置为导入媒体资产）。

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

/* ... */

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

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

使用图像作为背景图像 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 />

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

/* ... */

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

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

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

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

例子：

组件.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')));
    }
  }
}