reactjs - 使用图像 url 与本地导入图像

Question

通过使用 url 引用图像或通过下载图像、将其保存到某个目录然后将其导入组件来使用图像通常性能更好吗？

例如

<img src="images.google.com/example.png" />

对比

import Example from './static/example.png';
<img src={Example} />

Answer 1

由于 React 没有任何加载或提供图像数据的方法，所以这个问题本质上是关于其他工具的，比如 Webpack。

在本地存储图像并通过 webpack 加载它们的好处是能够使用您的 Webpack 加载程序处理它们，这样可以在它们足够小时内联它们(通过 base64 资源 URL)并对其进行指纹识别。不过，您仍然希望将这些最终 Assets 部署到某个包含在 CDN 中的地方。

仅通过字符串 URL 引用远程图像的优点是不会让大量二进制图像膨胀您的 SCM 存储库，不需要显式导入每个图像(请记住，Webpack 中没有 glob 导入)，并减少了您的 webpack 构建时间。

我怀疑大多数 React 应用程序最终会同时使用这两者，通常是在不同的用例中。例如，我总是将本地镜像用于 Logo 和应用 Assets ，而对于任何用户上传的内容或更大的 JPG/PNG Assets ，我将引用外部文件。