如何将图像数据传递给 img 标签？

Question

我有以下 html 元素：

<img src='profilePic?userName' class='form-avatar'></img>

我的 controller 有这个方法：

        [System.Web.Mvc.HttpGet]
        public async Task<ActionResult> profilePic()
        {
            string userName = Request.Url.ToString().Split('?').Last();

            string profilePic = await GraphHelper.GetProfilePicAsync(userName);

            return Content(profilePic);
        }

profilePic 的内容是

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

但是图像标签不加载图像，当我检查它时，它显示：

<img src='profilePic?userName' class='form-avatar'></img>

当我想要的是

<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' class='form-avatar'></img>

我如何实现这一目标？

Answer 1

“ data:image/png;base64,... ”是图像的 base64 编码，允许您将其直接嵌入到 HTML 中。如果您想通过 URL 引用它，则需要返回实际的二进制信息通过将其从 base64 转换为原始形式。

// Your code
var profilePicEncoded = profilePic.Replace("data:image/png;base64,", "");
var bytes = Convert.FromBase64String(profilePicEncoded);
return File(bytes , "image/png");

这将返回一个二进制 png 图像，然后可以自由嵌入。

Answer 2

Ehhhrm .. 这不会起作用，因为当你做这样的事情时：

<img src="http://blah.com/logo.png">

你的浏览器没有下载logo.png，base64吧，插入到DOM中的src属性，然后解释显示

换句话说，在 src 中你要么输入：

• 一个 url，比如“http://yourhost.com/api/path/to/your/controller/action”
• base64 编码数据，如“data:....”

如果你做后者，那么 base64 png 数据将在 html 发送到浏览器时插入到 html 中。