方法一:
import photo from '../asset/images/photo.jpg';
//引入本地图片
<img src={photo} className="App-logo" alt="photo" />
方法二:
{/* es5的写法 */}
<img src={require('../asset/images/photo.jpg')} alt="logo" />
Home.js
import React, { Component } from 'react';
import photo from '../asset/images/photo.jpg';
import '../asset/css/index.css'
class Home extends Component {
constructor(){
super();
//react定义数据
this.state={
name:'我是一个组件页面哦',
title:'我是一个title',
color:'test',
style:{
color:'blue',
fontSize:'80px'
}
}
}
render() {
return (
<div>
<img src={photo} className="App-logo" alt="photo" />
{/* es5的写法 */}
<img src={require('../asset/images/photo.jpg')} alt="logo" />
</div>
)
}
}
export default Home;
当引入服务器上的图片的时候,就是最基本的写法
<img src="http://www.intmote.com/star.png"/>
图片显示: