如何在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/