This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(316.8, 38%, 40%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESA%3C/text%3E%3C/svg%3E)
Hi, I'm attempting to show the preview image on my React app. I tried to use Url with 'https://{accountName}'.blob.core.winodws.net/{containerName}/{blobName} and I also tried the url with Sas token. ( I got it from generateSasUrl) Both doesn't work with <img> html tag. What url should I use for the tag? and How can I get the url with container and image name? BTW, Images are uploaded using uploadBrowerData
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(288, 10%, 37%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAP%3C/text%3E%3C/svg%3E)
SkillUP AS, just checking in to see if the below-answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.
SkillUP AS, just checking in to see if the below-answer helped. If this answers your query, do click "Accept the answer” for the same, which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(249.60000000000002, 98%, 34%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESP%3C/text%3E%3C/svg%3E)
Hello SkillUP AS,
I just tried below piece of React code with the html tag and the image is getting extracted from the storage container (like below)
To get the URL for the storage container blob image
Regards, Shiva.
The problem was that the image was broken ( "uploadBrowserData" function breaks the image file ). Thank you
Hello SkillUP AS, Thank you for posting your query here!
Your image should be able to show on your page with:
<img src="the_url_of your_image">
You could access blob with Blob URL(https://{storage-name}.blob.core.windows.net/{container-name}/{test.png}) when your image blob is public.
If the access level is private, you could access the image blob with SAS. And the URL looks like https://{storage-name}.blob.core.windows.net/{container-name}/{test.png}?{Blob SAS token}.
Do let us know if you have any further queries. I’m happy to assist you further.
Please do not forget to "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.
SkillUP AS, just checking if you could "Accept the answer” so that we can close this thread. And, if you have any further query do let us know.