使用SVG防止网络（xhr）呼叫？

Question

我想在我的HTML文件中包含一些SVG图像。我正在使用ReactJS 并使用<img>代码包含它们。

<img src="path_to_svg"></img>

现在，正如预期的那样，每个图像都会导致XHR网络请求。我想阻止XHR请求的性能和安全问题。

实现这一目标的最佳方法是什么？我应该考虑将SVG代码转换为Base64，并将CSS作为背景包含吗？

Answer 1

我认为您的两个选项是为图片使用data URIs或使用sprite sheets。

数据URI的问题在于，除非他们所处的文档被缓存（HTML文件或CSS文件），否则您的图像不会被缓存。但是你可以做一些事情to help with that。

精灵表解决方案不会阻止您的所有网络电话，但如果这是一个可行的选项，它会将其限制为只有一个。