尽管尝试了几种方法来加载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: {
}
}))
6条答案
按热度按时间n6lpvg4x1#
添加一些额外的属性到背景图像,它会工作-
我不知道为什么我们需要这些额外的属性(也许有人可以添加到答案中),但有时图像需要定义某些行为,如大小、位置等。
wf82jlnq2#
你应该这样写:
而且它应该起作用。
yxyvkwin3#
这条路很适合我
这是最低限度的。休息一下,你可以把它对齐。
piah890a4#
使用 prop ,试试这个:
20jt8wwn5#
在React中,您可以先导入图片,然后将其用作组件。
bqf10yzr6#
我整个早上都在面对这个问题。下面是我的修正方法。首先,导入图像,然后将其添加到字符串中: