如何在当前页面中显示base64（atob）中的外部图像答案

【问题标题】：How to display in a curent page an external image in base64 (atob)如何在当前页面中显示base64（atob）中的外部图像
【发布时间】：2022-10-24 00:04:25
【问题描述】：

我实际上在客户网站的“法律提及页面”中工作。他想在外部站点的完整图像（不是文本）主机端显示它，但用 base64 编码（不是简单的链接 https://...）。

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

这行不通...

<a href="#" onload='this.href=atob("aHR0cHM6Ly9jZG4uc3N0YXRpYy5uZXQvSW1nL3RlYW1zL3RlYW1zLWlsbG8tZnJlZS1zaWRlYmFyLXByb21vLnN2Zz92PTQ3ZmFhNjU5YTA1ZQ==")'></a> -->

这有效，但它是一个链接，我不想要这个，而是加载。

我尝试了很多东西，但没有什么对我有用。

有人能把我放在轨道上吗？

谢谢！

【问题讨论】：

标签： javascript image hyperlink base64

【解决方案1】：

data:image/png;base64,aHR0cHM6Ly9jZG4uc3N0YXRpYy5uZXQvSW1nL3RlYW1zL3RlYW1zLWlsbG8tZnJlZS1zaWRlYmFyLXByb21vLnN2Zz92PTQ3ZmFhNjU5YTA1ZQ==

是一个数据 URI。这意味着它应该包含实际的（图像）数据，而不是图像的链接。现在它包含一个 base64 编码的链接。获取您要显示的图像并将其（例如通过在线转换器）转换为 Base64 并将 Base64 字符串插入数据 URI。

示例（显示一个红点，示例来自Wikipedia）：

<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />

【讨论】：

我明白了，谢谢。可以对链接进行编码以调用外部图像。例子：我试图把这个：<img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e"> 转换成这样的东西：<img src="aHR0cHM6Ly9jZG4uc3N0YXRpYy5uZXQvSW1nL3RlYW1zL3RlYW1zLWlsbG8tZnJlZS1zaWRlYmFyLXByb21vLnN2Zz92PTQ3ZmFhNjU5YTA1ZQ==">
转换图片不是解决方案，因为我们需要在多个站点中更新它。这就是为什么图片是外部资源的原因。如果我们更改图片，那么图片将随处更新。
我明白了，我可能误解了你的问题。

【解决方案2】：

我解决了我的问题。

1 远程服务器
我没有通过 url 调用我的外部图像并尝试从我的网站将其转换为 base64，而是创建了一个 .txt 文件，其中已经包含编码的图像（就像 jps 提到的那样）。

2 回到我的网站
我刚刚用 file_get_contents 函数调用了 .txt 远程文件：

<php

$external_image_base64 = file_get_contents("https://exemple.com/images/myfilename.txt");<br>
img src="<php echo $external_image_base64; ?>"

?>

现在每次我需要更新我的图像时，我只需要转换新图像并将其粘贴到远程文件上。

【讨论】：