数据 URL 很大时图像未呈现：net::ERR_CONNECTION_RESET答案

【问题标题】：Image didn't rendered when Data-URL is large : net::ERR_CONNECTION_RESET数据 URL 很大时图像未呈现：net::ERR_CONNECTION_RESET
【发布时间】：2020-02-12 13:14:40
【问题描述】：

我有一个编码为 base64 格式的图像，我正在尝试像这样显示它。

<div class="card-body p-3 with-bottom-buttons">
    <div class="row h-100">
        <perfect-scrollbar>
            <div class="col">
                <img [src]="imageString" style="width:100%;height: auto;" class="cursor-pointer">
            </div>
        </perfect-scrollbar>
    </div>
</div>

当图像不太大时，它可以正常工作，但是对于较大的图像，它没有渲染。这里是编码图像的链接。

https://stackblitz.com/edit/angular-9ub83l?file=image

我已尝试使用在线工具对此进行解码，并且可以正常工作。似乎编码没有问题。

并且控制台出现错误。

net::ERR_CONNECTION_RESET

有什么建议吗？

【问题讨论】：

标签： angular image base64 encode data-uri

【解决方案1】：

我为我的问题找到了解决方案。当您对图像进行编码时，您必须先传递一个额外的参数，然后才能将其发送到后端。

imgString = "data:image/jpeg;base64," + Base64.encodeToString(buffer, 0, length, Base64.NO_WRAP);

如果有人和我有同样的问题，我希望这会有所帮助。

【讨论】：