react中使用图片三种方式
1、分离引入方式
import React, { Component } from 'react'
import Logo from '../assets/images/11.jpeg'
class Image extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div>
<img src={Logo} />
</div>
);
}
}
export default Image;
2、通过require引入
import React, { Component } from 'react'
class Image extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div>
<img src={require('../assets/images/11.jpeg')} />
</div>
);
}
}
export default Image;
3、引入线上地址,直接放链接
import React, { Component } from 'react'
class Image extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<div>
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png" />
</div>
);
}
}
export default Image;