Question

尽管尝试了几种方法来加载backgroundImage属性的图像，但它从未显示在页面中。加载外部图片（例如从google加载图片）可以正常工作。

我尝试过：

Components

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

App.tsx

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)"

description.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-styles.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;

Answer 1

在背景图片中添加一些其他属性，它将起作用-

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

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

Answer 2

使用道具，试试这个：

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

Answer 3

您应该在下面这样写：

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

它应该可以工作。

React makeStyles没有设置背景图像

3 个答案: