React基础语法03-引入本地图片和服务器图片的方法

• 2019 年 11 月 11 日
• 筆記

在组件里面引入本地图片的两种办法

方法一：

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"/>

图片显示：