スタイル定義を使用して、React.jsに背景画像を追加します。
let imgUrl = 'images/berlin.jpg'
let styles = {
root: {
backgroundImage: 'url(' + imgUrl + ')',
overflow: 'hidden',
},
...
ご覧のとおり、画像はx方向に繰り返されます。だから私はそれを拡張したかった:
let imgUrl = 'images/berlin.jpg'
let styles = {
root: {
backgroundImage: 'url(' + imgUrl + ')',
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
overflow: 'hidden',
},
...
しかし、画像はもうロードされていません:
それでは、React.jsで背景画像を設定して調整する方法を教えてください。
別の答えを明確にする
let imgUrl = 'images/berlin.jpg'
let styles = {
root: {
backgroundImage: `url(${ imgUrl })`
backgroundRepeat : 'no-repeat',
backgroundPosition: 'center',
}
}
このようなことを試しましたか:
let imgUrl = 'images/berlin.jpg'
let styles = {
root: {
background: 'url('+ imgUrl + ') noRepeat center center fixed',
backgroundSize: 'cover',
}
この投稿からインスピレーションを受けた: CSSのみを使用して、バックグラウンドでCSSイメージを伸縮します
画像を背景として使用する場合は、「backgroundImage」プロパティを使用することをお勧めします。
'background'プロパティを使用すると、コンポーネントのリロードで問題が発生する場合があります(たとえば、 'cover'属性は適切に適用されません)。
提案されたソリューション:
let imgUrl = 'images/berlin.jpg';
<div className = 'Component-Bg'
style = {{ backgroundImage: 'url(' + imgUrl + ')',
backgroundSize: 'cover',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
}}>
</div>