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

user_12046376 0
Viewed 73

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?

html java
2 Answers

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.

user_5951070

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.

user_30624010
Related