Reactjs js绑定图像

在webpack world中，我可以使用以下方式将图像捆绑并访问为URL

像这样：

const webpackConfig = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpg|png|svg)$/,
        use: [
          {loader: 'file-loader?name=[path][name].[hash].[ext]'}
        ],
        include: paths
      }
    ]
  }
}

在react组件上使用它，例如：

import foo from 'assets/images/foo.png'

function ReactFunctionalComponent () {
  return (<img src={foo} />)
}

从“assets/images/foo.png”导入foo
函数反应FunctionalComponent（）{
返回（）
}

这将把foo与图像的路径放在一起

---

有没有办法在rollup js上执行同样的操作，这样我就可以将一个图像资产作为URL，并在捆绑包中添加一个哈希？

您可以使用插件为rollup添加功能。 在这种情况下，使用

rollup plugin image

（）或

rollup plugin img

（），这似乎更灵活

---

考虑到这项技术可以增加文件的大小。

关于此插件的一个重要细节：

图像使用base64编码，这意味着它们将比磁盘上的大小大33%。因此，您应该仅在启动时方便使用的小图像上使用此选项