react 中使用图片

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;