04.添加图片的依赖

添加图片的依赖

创建/app/images/avatar.jpg

修改/app/component/Header.js

import React from 'react';
import Avatar from '../images/avatar.jpg';

class Header extends React.Component {
    render() {
        return (
            <div className="header">
                <div className="header-con">
                    <div className="user">
                        <span className="text">欢迎您！</span>
                        <span className="avatar">
                            <img src={Avatar} alt="" />
                        </span>
                    </div>
                </div>
            </div>
        )
    }
}
export default Header;

添加图片依赖/webpack.config.js

module: {
    loaders: [
        {
            test: /.*\.(gif|png|jpe?g|svg)$/,
            loaders: 'url-loader?name=images/[name].[ext]&limit=10000!image-webpack-loader' //10KB
        },
    ]
},

样式如下

image