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>

当图像不太大时效果很好，但是对于较大的图像，它没有渲染。这里是编码图像的 link。

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

我已经尝试使用在线工具对此进行解码并且它有效。似乎编码没有问题。

并且控制台出现错误。

net::ERR_CONNECTION_RESET

有什么建议吗？

Answer 1

我为我的 issue.when 找到了解决方案，您对图像进行编码，在将其发送到后端之前必须传递一个额外的参数。

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

希望对遇到和我一样问题的人有所帮助。

Data-URL 较大时图像未呈现：net::ERR_CONNECTION_RESET

Image didn't rendered when Data-URL is large : net::ERR_CONNECTION_RESET

base64

encode

image

data-uri

angular