web-dev-qa-db-ja.com

スタイルを使用してReact.jsで背景を設定する

スタイル定義を使用して、React.jsに背景画像を追加します。

let imgUrl = 'images/berlin.jpg'    
let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            overflow: 'hidden',
        },
        ...

enter image description here

ご覧のとおり、画像はx方向に繰り返されます。だから私はそれを拡張したかった：

let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
        backgroundImage: 'url(' + imgUrl + ')',
        backgroundImage: {
            flex: 1,
            resizeMode: 'cover', // or 'stretch'
        },
        overflow: 'hidden',
    },
    ...

しかし、画像はもうロードされていません：

enter image description here

それでは、React.jsで背景画像を設定して調整する方法を教えてください。

javascriptcssreactjs
9
Marcel

これは動作します：

    let imgUrl = 'images/berlin.jpg'
    let styles = {
        root: {
            backgroundImage: 'url(' + imgUrl + ')',
            backgroundSize: 'cover',
            overflow: 'hidden',
        },
        ...

enter image description here

10
Marcel

別の答えを明確にする

let imgUrl = 'images/berlin.jpg'
let styles = {
    root: {
       backgroundImage: `url(${ imgUrl })`
       backgroundRepeat  : 'no-repeat',
       backgroundPosition: 'center',
  }
}
7
Rodrigo Cipriani da Rosa

このようなことを試しましたか：

let imgUrl = 'images/berlin.jpg'
let styles = {
root: {

    background: 'url('+ imgUrl + ') noRepeat center center fixed',
    backgroundSize: 'cover',
}

この投稿からインスピレーションを受けた： CSSのみを使用して、バックグラウンドでCSSイメージを伸縮します

4
FLCcrakers

画像を背景として使用する場合は、「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>
3
Erik Martín Jordán