[英]background-image in react component
我正在構建一個頁面,我想要一個material-ui元素,使用background-image
CSS屬性來獲得背景圖像。 我當然用google搜索了,並且有解決方案但由於某種原因我看不到那個圖像。
PS1:即使將MUI元素改為常規也根本沒有幫助我。
PS2:當我在內部使用容器時,它會顯示,但這不是我想要的。
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>
)
}
}
您必須使用相對路徑導入圖像,如下所示。
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>
)
}
}
我找到了解決我案子的方法。 實際上以像素為單位設置容器高度有所幫助。
這是代碼:
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>
)
}
}
像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>
)
}
}
使用Material UI React和Create React App時遇到了同樣的問題。 這是適合我的解決方案。 請注意,我為相對路徑設置了webpack別名
import BackgroundHeader from "assets/img/BlueDiamondBg.png"
const BackgroundHead = {
backgroundImage: 'url('+ BackgroundHeader+')'
}
<div style={BackgroundHead}>
我得到了這個材料-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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.