img srcs 的内部算法是如何工作的？

Question

我很好奇浏览器（特别是 chrome）在将 img 标签 src 设置为 returns 一个 png 二进制字符串的路径与调用此端点的路径时在做什么手动（比如使用 Ajax 或 Axios），然后手动将图像 src 设置为此 PNG 二进制文件。因为两者结果不同

我是运行一个 Node/expressJs 服务器，它有一个 return 来自 images/ 路径的图像文件。

router.get('images/', async function(req, res) {
  try {
    return await fs
      .createReadStream('./images/sample.png')
      .pipe(res);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

此 API 调用将 return 一个 PNG 二进制字符串。

场景 1 - 将 img src 设置为 PNG 所在的端点

如果我这样设置 img 元素 <img src="http://localhost/images/"

此调用将从我的节点服务器 return PNG 二进制文件自动正确显示所有内容。

场景 2 - 使用 axios 手动请求此 PNG

但是，如果我使用像 axios 这样的库来手动调用这个端点，我会得到一个 PNG 二进制字符串（在 chrome dev-tools 'network' 选项卡中，当查看在响应数据中，我什至看到了一个不错的图像预览缩略图，因此该面板中的某些内容也正确地获取了 PNG 数据并将其显示在 img 元素中）。但是如果我将获取这些数据并尝试将其设置为图像标签的 src，我需要进行各种 base64 转换才能起作用。

所以我的问题是 - 当 img 元素从服务器接收二进制图像数据时，它的内部算法是什么？

Answer 1

没有'internal algorithm'。 src 是一个需要 URI 的 HTML 属性，无论它是 HTTP URI 还是 Base64 URI。如果您使用 JavaScript 请求图像，则必须将数据转换为 Base64 的原因是因为这是将二进制数据表示为 URI 的最直接方式。当浏览器看到 Base64 URI 时，它只是将其转换回二进制数据并显示它。

img srcs 的内部算法是如何工作的？

How does img srcs' internal algorithm work?

html

image

src

场景 1 - 将 img src 设置为 PNG 所在的端点

场景 2 - 使用 axios 手动请求此 PNG