Steps to fetch images from Azure Blob Storage for an e-commerce website!
Well, here are the steps to fetch images from Azure Blob Storage for an e-commerce website:
Set up Azure Blob Storage: First, you need to have an Azure Blob Storage account with a container that stores your images.
Set Access Level: Ensure that the blob container containing images has a Blob or Container Access Control List (ACL). This will allow the images to be accessed publicly.
Fetch Images: You can fetch the images by using the URL of the image in the src attribute of the img HTML tag.
The URL format is typically https://<your-storage-account-name>.blob.core.windows.net/<your-container-name>/<your-image-name>.
For example, if your storage account name is myaccount, blob container name is images, and the image name is logo.png, the blob URL would be https://myaccount.blob.core.windows.net/images/logo.png.
Here’s an example of how you can use this URL in an HTML img tag:
<img src="https://myaccount.blob.core.windows.net/images/logo.png" />
4. Display Images on Website: Now, when you load your website, the images from Azure Blob Storage should be displayed where you’ve placed the img tags.
Please replace myaccount, images, and logo.png with your actual Azure Storage account name, your container name, and your image name respectively.
Remember, you need to replace <your-storage-account-name>, <your-container-name>, and <your-image-name> with your actual Azure Storage account name, your container name, and your image name respectively.
Please note that this method assumes that your images are publicly accessible.
Result example: https://bigsarees.blob.core.windows.net/bigsarees/2023/08/DSC00492.jpg
If your images are private, you’ll need to generate a Shared Access Signature (SAS) for each image.
The SAS token provides you with time-limited read access to the image. However, generating SAS tokens would require server-side programming.
#AzureBlobStorage
#EcommerceWebsite
#ImageFetching
#CloudIntegration
#WebDevelopment
#AzureServices
#ProductImages
#WebsiteOptimization
#CloudStorage
#TechSolutions
MERN Stack Developer 💻 | IBA'25 🎓 | AIFactor Inc.
8moI have followed your procedure, but when I type the image URL in the browser, it is downloaded instead of being displayed in the browser.