reactプロジェクトに画像を導入するいくつかの方法

3786 ワード

いくつかのreactに画像と背景画像を挿入する方法

  • imgタグ導入ピクチャreactは実はjsのreader関数でレンダリングされたページであるため、直接src=“ ”と書くのはピクチャを導入できないため、以下の方法で
  • を導入する必要がある.
    <img src={require('../images/picture.png')} alt="  "/>
    
  • 背景画像導入1 1 1つ目は、通常のcssファイルを新規作成し、css構文を直接書くことができる
  • です.
    .img {
       background: url('../images/picture.png') 0 0 no-repeat;
    }
    

    2つ目はreactコンポーネントに変数を導入し、imgラベルに直接変数を割り当てることです.
    //       
    import bg from '../images/bg.png'
    //                   
    const imgStyle = {
      width: '100%',
      height: '500px',
      backgroundImage: 'url(' + bg + ')',
      backgroundPosition: 'center 0',
      backgroundSize: '2045px 472px',
      backgroundRepeat: 'no-repeat'
    }
    class Home extends Component {
    	constructor () {
    		super (props)
    	}
    	render() {
    		//             
    		<div style="imgStyle">
    			...
    		</div>
    	}
    }