0

Images are not displaying In Umbraco Backoffice in a media tab after i uploaded new image with Azure app service.

In local, all the images are also displaying in the Umbraco Back-office, but problem is that when I have published umbraco code to Azure App Service, Images are not showing.

Uploading media Via drag and drop option media tab:

Drag and Drop image

After uploading image successfully it's not showing :

enter image description here

Here it is inspect element path of newly uploaded image:

enter image description here

Saved images perfectly as per inspect element path above that i checked in FTP server (Azure App service is providing FTP server access for Code deployment and Media:

enter image description here

Can you please help to resolve issue ?

Robert Foster
  • 2,317
  • 18
  • 28
Maulik Dhaduk
  • 1
  • 2

1 Answers1

0

The first step should be to stop storing Media items on your local environment or servers (which is what you are doing at the moment as far as I understand) and you should set up your Umbraco website to use Azure Blob Storage for Media and ImageSharp Cache, for this you need to;

At this point, when you launch your website again, the blob storage will be used to store media items as well as the ImageSharp cache. When you check your blob storage, you should also see media and cache folders created after you upload a new image.

Any media files you already have (they should be under wwwroot/media as you are storing media items locally), you should now copy them from your local environment into the Azure Blob Storage media folder.

If you don't want to go for this recommended option, then you need to copy all images between environments manually and it is most likely you might need to publish the content nodes and clear caches to display the images - still you might see similar problems and end up adding those images manually (again) using the Umbraco backoffice (or by adding them via the content pages).

PS1: You can download the free Microsoft Azure Storage Explorer tool to reach your Blob Storage and copy your media files from your local environment to your Azure Blob Storage.

PS2: If you continue to store your media items locally or on your servers, then depending on how big your website is and how many users are reaching your website, you would inevitably see a lot of performance issues. With the approach that I have described above, you'd eliminate most of these issues at the very beginning.

PS3: Remember to create an Azure Blob Storage per environment, e.g., one for your dev, another for uat, another one for live etc. You can copy images between these Blob Storages using the same Azure Storage Explorer tool.

Nurhak Kaya
  • 1,470
  • 1
  • 18
  • 20
  • Images are storing perfectly in Azure app service storage(Ultimately it can access by FTP Server). Then why we need to use Blob service? – Maulik Dhaduk Aug 19 '22 at 05:31
  • Facing issue in Umbraco backoffice too. Whenever I upload image in Backoffice Media tab and try to display in same then also i am not able to see any image. (Name and default thumbnail are present but image is not loading) – Maulik Dhaduk Aug 19 '22 at 06:14
  • Please check my answer for why you should store your media in a blob storage. With regards to your second comment, aren't your images under the media folder? I can try helping more if you could give more details like your umbraco version. Also check the umbraco forum and documentation if you haven't done this, yet. – Nurhak Kaya Aug 19 '22 at 09:08
  • Image are already under media folder. I am using Umbraco9 and i have asked question have a look : https://our.umbraco.com/forum/using-umbraco-and-getting-started/109792-getting-500-internal-server-error-in-umbraco – Maulik Dhaduk Aug 19 '22 at 10:37