Question

我一直在尝试使用this解决方案来加载Image。但我收到的错误是我的网址不正确。

这就是我要加载的内容：

data:image/png;base64,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

它出了什么问题？

Answer 1

这与JavaScript无关

您的图片的base64编码看起来不正确。

这会渲染图像

<img src="data:image/png;base64,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">

要获得适当的base64编码，请在终端尝试

cat image.png | base64

或者

base64 < image.png

如果您无法使用基于终端的工具来执行此操作，则可以尝试使用此在线转换器：http://webcodertools.com/imagetobase64converter（未经测试）。

Learn more about Data URI scheme here

让我们尝试使用我们自己的互联网图片

http://i.imgur.com/vQ42K5E.png

cat image

在您的终端

curl http://i.imgur.com/vQ42K5E.png 2&>1 | base64

现在，取出该输出并将其用作图像数据src

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

See it here on jsfiddle

Javascript：使用base64加载图像不起作用

1 个答案: