CSS 加载 Base64 编码图像作为背景 URL答案

【问题标题】：CSS Loading a Base64 Encoded Image as a Background URLCSS 加载 Base64 编码图像作为背景 URL
【发布时间】：2021-10-31 20:15:56
【问题描述】：

是否可以将 Base64 编码的图像加载为 background-image: url("...") 但不会在页面源中公开实际编码的字符串？

例如，我有一个 Node API，当我们在 "/image" 获取请求时，它会返回序列化的 Base64 数据。

res.json("data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//Aw.....blah blah

是否可以仅将其作为 URL 加载到前端？因此background-image 仅显示 URL，而实际的 Base64 编码文本不会暴露在前端页面源中。

因此，如果您右键单击并转到 inspect，它会显示以下内容：

.my-image {
    background-image: url("http://exampleapi.net:8080/image");
}

但不是这个：

.my-image {
    background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... etc.
}

【问题讨论】：

标签： javascript html css node.js

【解决方案1】：

是的，但不是这样，因为您只获取 base64，服务器不会将文件“服务”为静态内容，但在客户端，base64 可以转换为 blob 并生成友好的URI如果这对你有用。

const base64ToBlobUrl = async (base64Data) => {
    const base64Response = await fetch(base64Data);
    const blob = await base64Response.blob();
    const blobUrl = window.URL.createObjectURL(blob);
    return blobUrl;
}

此函数将返回一个 URI，您可以在 <img> 标记或内联 CSS 背景中使用。

【讨论】：