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

文件肯定在指定的位置。

我加载错误吗？

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

Answer 1

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

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

/* ... */

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

Answer 2

此刻，我正在使用样式组件^ 5.0.1，这对我有用：

node affinity

Answer 3

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

/* ... */

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

Answer 4

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

这是一个替代解决方案，引用文件路径，原始方式，使用自定义 express 扩展来定位您的 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中导入图像

4 个答案: