使用图片

JS 里使用图片

通过 require 引用相对路径的图片。

比如：

export default () => <img src={require('./foo.png')} />

支持别名，比如通过 @ 指向 src 目录：

export default () => <img src={require('@/foo.png')} />

JS 里使用svg

组件式引入

import { ReactComponent as Logo } from './logo.svg'
function Analysis() {
  return <Logo width={90} height={120} />
}

url式引入

import logoSrc from './logo.svg'
function Analysis() {
  return <img src={logoSrc} alt="logo" />
}

CSS 里使用图片

通过相对路径引用。

比如，

.logo {
  background: url(./foo.png);
}

CSS 里也支持别名，但需要在前面加 ~ 前缀，

.logo {
  background: url(~@/foo.png);
}

注意：

1. 这是 webpack 的规则，如果切到其他打包工具，可能会有变化
2. less 中同样适用

图片路径问题

项目中使用图片有两种方式，

1. 先把图片传到 cdn，然后在 JS 和 CSS 中使用图片的绝对路径
2. 把图片放在项目里，然后在 JS 和 CSS 中通过相对路径的方式使用

前者不会有任何问题；后者，如果在 JS 中引用相对路径的图片时，在发布时会根据 publicPath 绝对引入路径，所以就算没有开启 dynamicImport 时，也需要注意 publicPath 的正确性。

Base64 编译

通过相对路径引入图片的时候，如果图片小于 10K，会被编译为 Base64，否则会被构建为独立的图片文件。

10K 这个阈值可以通过 inlineLimit 配置修改。

使用 CDN

TODO