"data:image/png" 在图像源代码中是什么意思？

Question

我正在使用Symfony，并在一个模板的图像源代码中找到了以下内容：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABUElEQVQoz2NgAIJ29iBdD0d7X2cPb+tY2f9MDMjgP2O2hKu7vS8CBlisZUNSMJ3fxRMkXO61wm2ue6I3iB1q8Z8ZriDZFCS03fm/wX+1/xp/TBo8QPxeqf+MUAW+QIFKj/+q/wX/c/3n/i/6Qd/bx943z/Q/K1SBI1D9fKv/AhCn/Wf5L5EHdFGKw39OqAIXoPpOMziX4T9/DFBBnuN/HqhAEtCKCNf/XDA/rZRyAmrpsvrPDVUw3wrkqCiLaewg6TohX1d7X0ffs5r/OaAKfinmgt3t4ulr4+Xg4ANip3j+l/zPArNT4LNOD0pAgWCSOUIBy3+h/+pXbBa5tni0eMx23+/mB1YSYnENroT5Pw/QSOX/mkCo+l/jgo0v2KJA643s8PgAmsMBDCbu/5xALHPB2husxN9uCzsDOgAq5kAoaZVnYMCh5Ky1r88Eh/+iABM8jUk7ClYIAAAAAElFTkSuQmCC" alt="Search on Symfony website" />

什么意思，如何创建自己的代码？

谢谢。

- kilkadg

Answer 1

这是一种URI方案（统一资源标识符方案），它提供了一种在网页中内嵌数据的方式，就像它们是外部资源一样。

请点击此处http://en.wikipedia.org/wiki/Data_URI_scheme查看更详细的描述。

您可以在此处对自己的数据进行编码：

请点击此处http://webcodertools.com/imagetobase64converter。

- Lee Taylor

---

谢谢，它比使用图片的位置要快吗？ - kilkadg

对于较小的图像，这可能会更快，但您可能不希望在网站中的每个图像都使用该技术。 - Lee Taylor

Answer 2

这是一个直接嵌入页面的base64编码图像。如果您想要生成自己的图像，任何Linux系统上的base64工具都可以做到这一点：

base64 image.png

将该字符串复制到您的图像标记中即可。

<img src="data:image/png;base64,LONGSTRINGOFASCIICHARACTERS" alt="..." />

- Christian Ternus

Answer 3

这是数据URI方案，它是一种在URI中提供资源实际内容而非位置的方式。

在链接的维基百科页面上有生成代码的示例，但正如您所给出的示例，生成一个数据URI相当容易；只需提供MIME类型、使用的编码和内容即可。

- Lepidosteus

Answer 4

这是一个使用'data uri scheme'的URL。

- Pateta