图片和 svg 的使用

引用图片资源

在项目中引用图片资源，可以通过如下方式：

const starImage = require('../../images/star.png');
...
render() {
    return <img src={starImage} alt="">
}

file-loader 会将图片转成 base64 的 data-uri，从而减少图片请求。

但若图片非常巨大 >5M，则强烈建议将图片上传专门的图片 cdn，然后引用绝对路径。

引用 svg 资源

在项目中引用 svg 资源，可以通过如下方式：

const StarSvg = require('../../images/star.svg');
...
render() {
    return <StarSvg className="star-svg"/>
}

此时，svg 被当作一个 react component 来加载

可以通过 css 属性 fill 来改变 svg 的颜色

.star-svg {
    fill: red;
}