React.js styled-components 导入图像并将其用作 div 背景

Posted 2023-03-15

【中文标题】React.js styled-components 导入图像并将其用作 div 背景

【英文标题】：React.js styled-components importing images and using them as div background

【发布时间】：2017-05-11 19:31:54

【问题描述】：

我正在使用 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 和 styled-components）

【问题讨论】：

您可以尝试在浏览器中打开http://localhost:3000/assets/image.png 吗？

您是否尝试过导入图片例如： import someName from '../../assets/image.png' 'someName' 可以替换为您想要的任何名称

这是因为您的代码将在浏览器中执行，而不是在服务器中，因此您无法从浏览器访问您的文件系统。您可以为 webpack 使用 'file-loader' 或提供静态文件夹。我认为最简单的方法是npmjs.com/package/file-loader

@F***Schultz，那没用。找不到图片。

【参考方案1】：

你应该按照以下方式导入图片（假设你已经配置了 webpack 来导入媒体资源）。

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

/* ... */

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

【讨论】：

我还需要明确地给出height 和width 属性。

@IsaacPak 所以background-size css 参数呢？基本上将样式化组件视为您的普通 css。

@Ilja 如果你想动态导入图片怎么办？

@inker 来自网址？只需在 background-image 中使用 url 吗？它和你使用 css 的一样

@developer 假设你像这样传递它<HeaderImage someUrl="https://.... />" 你可以通过background-image: url($props => props.someUrl) 以样式访问这个道具

【参考方案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_ 表示法不起作用的组件。

注意：组件需要与 styled-components 兼容。

想象一下，你会在一个文件中导出 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 />

【参考方案3】：

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

/* ... */

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

【讨论】：

对于静态标志这个方法很好。

【参考方案4】：

如上所述，导入文件是一种方法，但不是唯一的方法。

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

免责声明： 这个解决方案是针对 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')));
    
  

【讨论】：

确实，如果你将使用“/assets/..”模式，它在生产中可以工作，但对于 webpackDevServer 会失败..