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

いくつかの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>
	}
}