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

Question

I have an image that encoded to base64 format and I'm trying to display it like this.

<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>

When an image is no too large it works fine, but for the larger images, it didn't render .here is the link for the encoded image.

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

I have tried to decode this with online tools and it works. seems there is no issue with the encoding.

AND there is a error in the console.

net::ERR_CONNECTION_RESET

Any suggestions?

Answer 1

I found a solution for my issue.when you encode the image there is an extra arg you have to pass before you send it to the backend.

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

I hope this will help if anyone having the same problem as me.