angular - Data-URL较大时，未渲染图像:net::ERR_CONNECTION_RESET

Question

我有一个编码为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

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



并且控制台中有错误。

净:: ERR_CONNECTION_RESET


有什么建议？

Answer 1

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

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

如果有人遇到与我相同的问题，希望对您有所帮助。