typescript React makeStyles未设置背景图像

3zwjbxry  于 2023-02-05  发布在  TypeScript
关注(0)|答案(6)|浏览(152)

尽管尝试了几种方法来加载backgroundImage属性的图像,但它从未在页面中显示。加载外部图像(例如从谷歌)按预期工作。
我试过:

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: {

    }
}))
n6lpvg4x

n6lpvg4x1#

添加一些额外的属性到背景图像,它会工作-

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'
    }

我不知道为什么我们需要这些额外的属性(也许有人可以添加到答案中),但有时图像需要定义某些行为,如大小、位置等。

wf82jlnq

wf82jlnq2#

你应该这样写:

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

而且它应该起作用。

yxyvkwin

yxyvkwin3#

这条路很适合我

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

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

这是最低限度的。休息一下,你可以把它对齐。

piah890a

piah890a4#

使用 prop ,试试这个:

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

20jt8wwn5#

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

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

bqf10yzr6#

我整个早上都在面对这个问题。下面是我的修正方法。首先,导入图像,然后将其添加到字符串中:

import banner_background from "./banner_background.png";

backgroundImage: `url(${banner_background})`

相关问题