在react&webpack项目中须要引入图片,可是webpack使用的模块化的思想,若是不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了url能够很好的解决这个问题。在stackoverflow上对此问题也进行了详细的描述。 css
npm install url-loader --save-dev
经过安装url-loader咱们就能够在react&webpack项目中成功处理相对路径的问题。 前端
jsx中使用以下:react
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表达式要写在{}中。 webpack
css中使用以下:web
div.phone { background: url('../images/phone.png') no-repeat ; }
实际上也就是直接使用便可,由于url-loader解决的问题就是将路径成为能够处理的。npm
参考文章: https://survivejs.com/webpack/loading/images/less