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