web-dev-qa-db-ja.com

背景画像が反応していません

インラインスタイルで背景画像を取得しようとするのは初めてです。しかし、それは機能していません。

エラー「URLが定義されていません」を表示

  render() {
    return (
        <div className="phase1" 
             style ={ { backgroundImage: url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300') } }>

            <input id="search" 
                   type="text" 
                   placeholder={this.state.search} 
                   onChange={this.updateSearch.bind(this)}/>
            &nbsp; &nbsp;&nbsp; &nbsp;

            <Link className="button1" to="Form"> + </Link>
        </div>
       )
    }
 }
htmlcssreactjsreact-nativereactcsstransitiongroup
8
komal deep singh chahal

CSS値は常に文字列です。 backgroundImage値を引用符で囲んで文字列にします。

<div className="phase1" style ={ { backgroundImage: "url('https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300')" } }>
12
Ross Allen

同様の問題に直面し、これは私のためのトリックをしました

style={{backgroundImage: 'url(' + require('./images/sword.png') + ')'}}

トリックはrequireを追加することでした

15
Kraulain

今日、このスレッドに出くわしました。 backgroundImageプロパティを動的に変更する必要があったため、requireはオプションではありませんでした。私のElectronJSアプリで行ったのは、

const imageFilePath = './some/dynamic/path/here';
const style = { backgroundImage: `url('file://${imageFilePath}')` };

これが誰かを助けることを願っています:)

3
Ancinek

私の場合、スペースを含むURLがあるので、サーバーから直接URL（imagePath）を取得したため、引用符ex： 'url'で囲む必要があります。

<div style={{ backgroundImage: `url('${imagePath}')` }} />

これが誰かを助けることを願っています。

0
Wachid

私は今朝この同じ問題と戦いましたが、以下のスニペットでそれを修正することができました。

  <div
  className="col-md-4 col-xs-12"
  style={{
    backgroundImage: `url(${require('./path/img.png')})`,
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
  }}
>
0
Yusuf Adeyemo

Reactでは、このような画像の相対パスを配置します

<div className="container-login100" style={{ backgroundImage: "url('./folder/images/bg-01.jpg')" }}>

そのままでは機能しないようです[〜＃〜] jsx [〜＃〜]、画像をインポートするか、必要です

import BackgroundImage from './../frontend_authentication_copied/images/bg-01.jpg'

...

styles = {
        backgroundImage: `url(${BackgroundImage})`
    }

...

<div className="container-login100" style={this.styles}>

相対インポートはsrcフォルダーの外部からはサポートされていないため、すべての画像をsrcフォルダー内に配置してくださいcreate-react-app使用されている。

0
Neeraj Sewani