如何在react&webpack中引入图片？

　　在react&webpack项目中需要引入图片，但是webpack使用的模块化的思想，如果不进行任何配置，而直接在jsx或者是css中使用相对路径来使用就会出现问题，在webpack中提供了url可以很好的解决这个问题。在stackoverflow上对此问题也进行了详细的描述。 

　　

npm install url-loader --save-dev

　　

　　通过安装url-loader我们就可以在react&webpack项目中成功处理相对路径的问题。 

　　

　　jsx中使用如下：

import React from "react"
require('../css/intro.less')
import protrait from '../images/portrait.png'


class Intro extends React.Component{
    render () {

        return (
            <div className='intro-wrap'>
                <div className="portrait">
                    <img src={protrait}/>
                 </div>
                <div className="name">WayneZhu</div>
                <div className="position">前端开发工程师</div>
            </div>
            )
    }
}

export default Intro; 

 

也就是说通过url-loader我们就可以像使用组件一样通过 import 来引入了。 接着jsx中的js表达式要写在{}中。 

 

 

 

　　css中使用如下：

    div.phone {
            background: url('../images/phone.png') no-repeat ;
        }

　　实际上也就是直接使用即可，因为url-loader解决的问题就是将路径成为可以处理的。

 

 

 

　　参考文章：  https://survivejs.com/webpack/loading/images/