React makeStyles 没有设置背景图片答案

【问题标题】：React makeStyles doesn't set background imageReact makeStyles 没有设置背景图片
【发布时间】：2019-12-06 19:20:42
【问题描述】：

尽管尝试了几种方法来为 backgroundImage 属性加载图像，但它从未出现在页面中。加载外部图像（例如来自 google）按预期工作。

我试过了：

backgroundImage: `url(${Papyrus})`
backgroundImage: "url(" + Papyrus + ")"
backgroundImage: "url(../../assets/images/papyrus.png)"
backgroundImage: Papyrus
backgroundImage: "url(\"../../assets/images/papyrus.png\")"
backgroundImage: "url(assets/images/papyrus.png)"

它们都不起作用。当我查看我的网络审计时加载了图像，我可以在静态文件夹中找到它，但它从未显示。

App.tsx

import React from 'react';
import makeStyles from './app-styles';
import {Container} from "@material-ui/core";
import Description from "../description/description";

const App: React.FC = () => {
    const classes = makeStyles();
    return (
        <div className="App">
            <Container maxWidth={"xl"}>
                <div className={classes.row}>
                    <Description/>
                </div>
            </Container>
        </div>
    );
};

export default App;

description.tsx

import * as React from "react";
import makeStyles from './description-styles';

interface DescriptionProps {
}

const Description: React.FC<DescriptionProps> = () => {
    const classes = makeStyles();

    return (
        <div className={classes.descriptionCard}>
            <p>Some text</p>
        </div>
    )
};

export default Description;

description-styles.tsx

import makeStyles from "@material-ui/core/styles/makeStyles";
import Papyrus from "../../assets/images/papyrus.png";

export default makeStyles(theme => ({
    descriptionCard: {
        backgroundImage: `url(${Papyrus})`,
        // margin: 'auto',
        height: '25vh',
        width: 'calc(20vw * 0.54 - 2%)',
        borderRadius: 8,
        display: 'flex',
        marginLeft: '10px',
        marginTop: '10px'
    },
    text: {

    }
}))

【问题讨论】：

你能在控制台记录 url(${Papyrus}) 语句吗？
@Domino987 我不确定如何通过控制台记录该语句。你到底想让我输入什么？
导出默认 makeStyles(theme => { console.log(url(${Papyrus})) return { descriptionCard: { backgroundImage: url(${Papyrus}), // margin: 'auto', height: ' 25vh'，宽度：'calc(20vw * 0.54 - 2%)'，borderRadius：8，显示：'flex'，marginLeft：'10px'，marginTop：'10px'}，文本：{}}}））跨度>
由于解析错误，您无法在控制台记录。你确定你以前做过吗？
是的，我确定 xD makeStyles(theme => { console.log(url(${ Papyrus })); return { descriptionCard: { backgroundImage: url(${ Papyrus }) } } }) ;你确定你抄对了吗？

标签： css reactjs typescript material-ui create-react-app

【解决方案1】：

你应该这样写：

backgroundImage: `url(images/papyrus.png)`

它应该可以工作。

【讨论】：

也不起作用。它也与 backgroundImage 几乎相同：“url(../../assets/images/papyrus.png)”
我更新了我的代码，这对我有用。我刚刚试了一下。
你的图片在哪里？
src/assets/images/image
对于不在公共文件夹中的图像（docs，您可以像这样引用它们： background-image: url(./papyrus.png);

【解决方案2】：

为背景图片添加一些额外的属性，它就会起作用 -

descriptionCard: {
        backgroundImage: `url(${Papyrus})`,
        backgroundPosition: 'center', 
        backgroundSize: 'cover', 
        backgroundRepeat: 'no-repeat',
        // margin: 'auto',
        height: '25vh',
        width: 'calc(20vw * 0.54 - 2%)',
        borderRadius: 8,
        display: 'flex',
        marginLeft: '10px',
        marginTop: '10px'
    }

我不确定我们为什么需要这些附加属性（也许有人可以添加到答案中），但有时图像需要定义某些行为，例如大小、位置等。

【讨论】：

【解决方案3】：

使用道具，试试这个：

const useStyles = makeStyles({
  bg: props => ({
    backgroundImage: \`url(${props.backgroundImage})\`
   })
})

【讨论】：

【解决方案4】：

这种方式适合我

    import LaptopImage from "../../assets/laptop.jpg";
    ...

    const useStyle = makeStyles((theme) => ({
        wrapper:{
            backgroundImage: `url(${LaptopImage})`,
            height: '100vh'
        }
    })

这是最低限度的。休息一下就可以正确对齐了。

【讨论】：

这对我有用，图像文件在这里加载；否则 CSS 存在但图像文件丢失

【解决方案5】：

在 React 中，可以先导入图片，然后将其用作组件。

import yourPicture from './assets/img/yourPicture.png'
...
const userStyles = makeStyles({
  root: {
    backgroundImage: `url(${yourPicture})`,
    minHeight: '100vh', // set height size 100%
  },
})

【讨论】：