我试图访问一个静态图像在React内的内联backgroundImage属性中使用。不幸的是，我已经不知道该怎么做了。
总的来说，我认为你是这样做的:
import Background from '../images/background_image.png';
var sectionStyle = {
width: "100%",
height: "400px",
backgroundImage: "url(" + { Background } + ")"
};
class Section extends Component {
render() {
return (
<section style={ sectionStyle }>
</section>
);
}
}
这适用于<img>标签。有人能解释一下两者的区别吗?
例子:
<img src={Background} />工作得很好。
谢谢你！
当前回答
import React, { PureComponent } from 'react'
import logo from './logo.png';
class Home extends PureComponent {
render() {
return (
<div>
<div
style={{
backgroundImage: `url("https://www.nicesnippets.com/image/imgpsh_fullsize.png")`, backgroundRepeat: 'no-repeat', width: '800px', height: '250px', color: 'blue'
}}>
Nice Snippets
</div>
<hr />
<div
style={{
backgroundImage: `url(${logo})`, backgroundRepeat: 'no-repeat', width: '100%', height: '250px', color: 'blue'
}}>
Nice Snippets
</div>
</div>
)
}
}
export default Home
其他回答
试试这个:
style={{ backgroundImage: `url(require("path/image.ext"))` }}
这对我来说很管用:
import Background from '../images/background_image.png';
<div className=...
style={{
background: `url(${Background})`,
}}
>...</div>
这对我很有效
style={{backgroundImage: url(${require("../assets/pet4.jpeg").default})}}
你可以使用模板文字(用反标记:'…'括起来)代替。对于这样的backgroundImage属性:
backgroundImage: `url(${Background})`
import React, { PureComponent } from 'react'
import logo from './logo.png';
class Home extends PureComponent {
render() {
return (
<div>
<div
style={{
backgroundImage: `url("https://www.nicesnippets.com/image/imgpsh_fullsize.png")`, backgroundRepeat: 'no-repeat', width: '800px', height: '250px', color: 'blue'
}}>
Nice Snippets
</div>
<hr />
<div
style={{
backgroundImage: `url(${logo})`, backgroundRepeat: 'no-repeat', width: '100%', height: '250px', color: 'blue'
}}>
Nice Snippets
</div>
</div>
)
}
}
export default Home
