反应组件中的背景图像

Posted 2023-02-22

【中文标题】反应组件中的背景图像

【英文标题】：background-image in react component

【发布时间】：2018-04-19 02:18:10

【问题描述】：

我正在构建一个页面，并且我希望 material-ui 元素具有使用 background-image CSS 属性的背景图像。当然，我已经在 Google 上搜索过了，并且有一些解决方案，但由于某种原因，我看不到该图像。

P.S.1：即使将 MUI 元素更改为常规元素也对我没有任何帮助。

P.S.2：当我在容器内使用时它会显示，但这不是我想要的。

UPDATE1：尝试为容器添加高度和宽度，但仍然没有成功...

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';


const styles = 
    paperContainer: 
        backgroundImage: `url($"static/src/img/main.jpg")`
    
;

export default class Home extends React.Component
    render()
        return(
            <Paper style=styles.paperContainer>

            </Paper>
        )
    

【参考方案1】：

您必须使用相对路径按以下方式导入图像。

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; // Import using relative path


const styles = 
    paperContainer: 
        backgroundImage: `url($Image)`
    
;

export default class Home extends React.Component
    render()
        return(
            <Paper style=styles.paperContainer>
                Some text to fill the Paper Component
            </Paper>
        )
    

【讨论】：

不幸的是没有帮助:(

为了能够导入和使用这样的图像你需要使用github.com/webpack-contrib/file-loader@Roman 你在用吗？

@EugeneTsakh 是的，我确实遇到了这种依赖关系。捆绑没有错误。 ("文件加载器": "^0.11.2")

嗯，这很奇怪，它适用于我的简单 create-react-app... 您是否尝试在简单的<img src=Image /> 中使用图像来查看导入是否有效？哦，我可能已经找到了！您是否在<Paper> 中添加了一些文字只是为了检查我的解决方案是否有效？我刚刚更新了我的答案

我已经发布了这个问题的答案，但是，我也刚刚尝试了你的解决方案。对我不起作用:(

【参考方案2】：

我找到了适合我的情况的解决方法。实际上以像素为单位设置容器高度有帮助。

代码如下：

import React from 'react';


const styles = 
    paperContainer: 
        height: 1356,
        backgroundImage: `url($"static/src/img/main.jpg")`
    
;

export default class Home extends React.Component 
    render() 
        return (
            <div style=styles.paperContainer>
            </div>
        )
    

【参考方案3】：

就像 Romainwn 所说，您需要将图像导入文件。确保使用父级的相对路径，而不是

static/src/img/main.jpg    #looks for static folder from current file location

做

/static/src/img/main.jpg #looks for file from host directory:

另一个技巧是在组件中添加一个内联样式标签：

import React from 'react';

import Paper from 'material-ui/Paper';

import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

import Image from '../img/main.jpg'; // Import using relative path


export default class Home extends React.Component
    render()
        return(
            <Paper style="background:path/to/your/image;">

            </Paper>
        )
    

【参考方案4】：

在使用 Material UI React 和 Create React App 时遇到了同样的问题。这是对我有用的解决方案。注意我为相对路径设置了 webpack 别名

import BackgroundHeader from "assets/img/BlueDiamondBg.png"

const BackgroundHead = 
  backgroundImage: 'url('+ BackgroundHeader+')'
  

<div style=BackgroundHead>

【参考方案5】：

我让它为 material-ui 工作，我的父元素上的填充是 24px，所以我在背景图像的宽度上添加了 48px 以使其工作......

const styles = 
   heroContainer: 
     height: 800,
     backgroundImage: `url($"../static/DSC_1037.jpg")`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     width: `calc(100vw + 48px)`,
     margin: -24,
     padding: 24,
   
  ;
<Grid
    container
    direction="column"
    justify="flex-end"
    alignItems="right"
    style=styles.heroContainer >
    <Grid item>Goes here</Grid>
</Grid>