CODEWITHSUNDEEP
javahtml
Tiago Silva
Tiago Silva

Reputation: 259

What is the proper way to send images from an API to HTML?

My current implementation is the following:

I store the image in binary data in the Database. Then I load it and send it as Base64 data in the Http Response.

API:

    @Lob
    @Column(length = 16777215)
    private byte[] image;

Then load it in the UI <img ng-src="data:image/png;base64, {{product.image}}">

The HTTP Response is Huge for some images. It works well for a couple of images but let's say I want to display 100 images.

Is this the proper way to do it fast and well?

Upvotes: 2

Views: 520

Answers (2)

KeironLowe
KeironLowe

Reputation: 731

I don't believe there is a way around that, you're just transferring the size of the image to the HTML instead.

I would recommend against storing images in a database, the correct way to do it would be to store the images on the file system and store the URL within the database.

That should keep your HTTP response small and the HTML will load fast.

Upvotes: 0

pwkc
pwkc

Reputation: 527

You could just try passing the URL to API in the image node. For example: 

<img ng-src="https://api.myhost.com/product/5646/image" />

In most cases it should work just fine.

Upvotes: 1

Related Questions