Best way to store product images

Question

Hello,

I have recently uploaded my website to azure and im trying to figure the best way to Upload and display images for the products in my Ecommerce website.

In my old Localhost project i would just store it on my C hard drive. with an online website that is offcourse not possible.

I havea read allot about the Azure Blob Container I know that i can upload and download with that.
But I wonder if that is realy the fastes and best way to Upload and download images for my Ecommerce products

My code in .Net 7:

       [HttpGet("DownloadAzureBlob")]
        public async Task DownloadAzureBlob()
        {
                var blobClient = _client.GetBlobClient("test342.jpg");
                if (await blobClient.ExistsAsync())
                {
                    BlobDownloadResult content = await blobClient.DownloadContentAsync();
                    Stream downloadedData = content.Content.ToStream();
                	return Ok(downloadedData);

                }
            return Ok();
        }

Then in Angular.TS i would use FileReader to unpack the Blob file so i can display it:

 test(){
	this.service.GetAzureBlobs().subscribe(data =>{
    let reader = new FileReader();
 	reader.readAsDataURL(data);
      reader.onload =(_event) => { 
		this.img = reader.result;
		}       
}

This works fine but with multiple Images this could get too messy with all the unpacking codes and stuff it could slowdown page loading. Also when I use Google Inspections and I look at the "src=" I see a long Byte text instead of the normal Image url to i see on all the other websites.

I wonder if it would not be easier and more professional to use a URL img link rather than Azure Blob so i can save that link in the database

like this: Website.com/Assets/Images/Product1
This would be much more cleaner and faster in my opinion

I would like to know what the best and most modern way is to handle images that need to be Uploaded, Displayed and Removed.

Thanks.

Answer

Hi,

In general the best way for database-driven site is to store link in database and have the image files on the file system of the web server. The link data that needs to be stored can often be small, for example, just the product id/sku, and then in your code you could concatenate to create strings as needed. For example, /images/.jpg. Often you will have multiple different files (e.g. small, medium, large) for each product and you can create pattern for that.

This allows client to request the image from the web server normally and doesn't slow down database requests. You may also want to set up CDN/edge caching so that the image files will be served from point of presence close to the client instead of your server.

Please click Accept Answer if the above was helpful.

Thanks.

-TP

Answer

you can use your website as a proxy to azure blob or just use the azure blob url directly.

Share via

Best way to store product images

2 answers

Your answer