image not showing from azure blob

Ganesh Mitra 50 posts 210 karma points

Jun 09, 2020 @ 12:08

I am using umbraco 7.15.4 and try to fetch images from blob media folder. I did all setup as per blog https://blog.nicolaayan.com/2018/05/how-to-setup-your-umbraco-media-folder-with-an-azure-storage-account/ but images still fetch from local.

Also cross check setup from https://our.umbraco.com/Documentation/Extending/FileSystemProviders/Azure-Blob-Storage/index-v7 but still same.

Could you please pointing anything I missed?

Here is my settings

  <add key="containerName" value="media"/>
  <add key="rootUrl" value="https://[AccountName].blob.core.windows.net/"/>
  <add key="connectionString" value="DefaultEndpointsProtocol=https;AccountName=xxx;AccountKey=xxxx"/>
  <add key="maxDays" value="365"/>

  <add key="useDefaultRoute" value="true"/>

  <add key="usePrivateContainer" value="false"/>
</Parameters>

Note: When I upload file from umbraco backoffice its sync to blob but not read but permission is there.

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 10, 2020 @ 12:26

Is anyone please help me on this.

Copy Link

Yakov Lebski 590 posts 2344 karma points

Jun 11, 2020 @ 03:46

you should define blob container has anonymous access

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 11, 2020 @ 05:46

Thanks for your reply.

Yes permission already there but still image source showing local instated of blob source.

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 11, 2020 @ 11:17

Is there anything else instated of permission?

Copy Link

Yakov Lebski 590 posts 2344 karma points

Jun 11, 2020 @ 13:56

I think you need rename local folder to avoid missunderstanding, check what you have this part in web.config

<location path="media">
        <system.webServer>
          <handlers>
            <remove name="StaticFileHandler" />
            <add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
          </handlers>
        </system.webServer>
      </location>

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 11, 2020 @ 14:09

web.config already have that section and media folder rename but still same.

Copy Link

Thomas Rydeen Skyldahl 47 posts 229 karma points

Jun 11, 2020 @ 15:09

Could you try adding a query string to the image path eg: ?width=100

if the image shows this way, Image Processor is properbly configured to only serve images when using query strings

if you want to avoid this you can either try adding this Web.config in the Media folder:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
  <handlers>
    <clear/>
    <add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler"/>
    <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read"/>
   </handlers>
 </system.webServer>
</configuration>

or try configuring ImageProcessor to intercept all requests this can be done in /config/imageprocessor/processing.config

on the root <processing> element set the setting interceptAllRequests="true"

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 11, 2020 @ 15:59

Hi Thomas,

Great, working now but fonts not loading return 500 like (.ttf, bootstrap.min.css.map, ajax-loader.gif etc)

Copy Link

Thomas Rydeen Skyldahl 47 posts 229 karma points

Jun 12, 2020 @ 07:42

Happy to help! :)

Copy Link

Yakov Lebski 590 posts 2344 karma points

Jun 14, 2020 @ 13:29

if you see the image in blob, the issue is only what container is not public

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 14, 2020 @ 15:11

Hi Yakov,

Container already public and no issue with existing images. Only issue when I upload new, image showing in blob container means upload working but umbraco backoffice does not render this.

Copy Link

Thomas Rydeen Skyldahl 47 posts 229 karma points

Jun 14, 2020 @ 19:26

Is the link shown in the image correct? If it is then it must be something in the image processor configuration that's wrong

As I remember Umbraco creates a thumbnail via Image Processor

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 15, 2020 @ 05:54

Yes link showing image correctly.

Here is the error log when creating thumbnail

System.UriFormatException: A relative URI cannot be created because the 'uriString' parameter represents an absolute URI.
   at System.Uri.CreateThis(String uri, Boolean dontEscape, UriKind uriKind)
   at System.Uri..ctor(String uriString, UriKind uriKind)
   at Umbraco.Web.Editors.ImagesController.GetResized(String imagePath, Int32 width, String sizeName)
   at Umbraco.Web.Editors.ImagesController.GetBigThumbnail(String originalImagePath)
   at lambda_method(Closure , Object , Object[] )
   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.<>c__DisplayClass6_2.<GetExecutor>b__2(Object instance, Object[] methodParameters)
   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ActionExecutor.Execute(Object instance, Object[] arguments)
   at System.Web.Http.Controllers.ReflectedHttpActionDescriptor.ExecuteAsync(HttpControllerContext controllerContext, IDictionary`2 arguments, CancellationToken cancellationToken)
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Controllers.ApiControllerActionInvoker.<InvokeActionAsyncCore>d__1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<ExecuteActionFilterAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<ExecuteActionFilterAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<ExecuteActionFilterAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Web.Http.Filters.ActionFilterAttribute.<CallOnActionExecutedAsync>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.ActionFilterAttribute.<ExecuteActionFilterAsyncCore>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Controllers.ActionFilterResult.<ExecuteAsync>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.AuthorizationFilterAttribute.<ExecuteAuthorizationFilterAsyncCore>d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.AuthorizationFilterAttribute.<ExecuteAuthorizationFilterAsyncCore>d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Filters.AuthorizationFilterAttribute.<ExecuteAuthorizationFilterAsyncCore>d__3.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at System.Web.Http.Controllers.ExceptionFilterResult. <ExecuteAsync>d__6.MoveNext()

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 17, 2020 @ 17:47

I am still not finding any solution for that. Can anyone please help me on this.

Copy Link

Thomas Rydeen Skyldahl 47 posts 229 karma points

Jun 17, 2020 @ 21:24

It looks like others are experincing similar problems

with ImageProcessor:

https://our.umbraco.com/forum/extending-umbraco-and-using-the-api/82351-imageprocessor-not-working-with-umbracofilesystemprovidersazure

From what I gather try upgrading ImageProcessor to see if the problem goes away.

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 19, 2020 @ 18:09

Hi Thomas,

Still the same issue after upgrade image processor. I think no issue on image processor, issue on umbraco cms for version 7.15.

If /umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=https://xxx/media/568260/FGD_hero.jpg&rnd=0.7155816642593931 then return 500. ERROR MESSAGE: A relative URI cannot be created because the 'uriString' parameter represents an absolute URI

If /umbraco/backoffice/UmbracoApi/Images/GetBigThumbnail?originalImagePath=/media/568260/GTR_hero.jpg&rnd=0.7155816642593931 then working fine.

same issue as on https://issues.umbraco.org/issue/U4-8039

Note: My blob container name "azapp-umbraco-stage-tmha-001" not media

Copy Link

Thomas Rydeen Skyldahl 47 posts 229 karma points

Jun 19, 2020 @ 21:19

How does your security config look for imageprococessor?

Especially the paths and the container setting is important

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jun 21, 2020 @ 15:42

Hi Thomas,

All config as follows

1) FileSystemProviders.config

<FileSystemProviders> 
  <Provider alias="media" type="Our.Umbraco.FileSystemProviders.Azure.AzureBlobFileSystem, Our.Umbraco.FileSystemProviders.Azure">
    <Parameters>     
      <add key="containerName" value="azapp-umbraco-stage-tmha-001"/>
      <add key="rootUrl" value="https://xxx.blob.core.windows.net/"/>
      <add key="connectionString" value="DefaultEndpointsProtocol=https;AccountName=xxx;AccountKey=xxx"/>
      <add key="maxDays" value="365"/>  
      <add key="useDefaultRoute" value="true"/>      
      <add key="usePrivateContainer" value="false"/>      
    </Parameters>
  </Provider>
</FileSystemProviders>

2) security.config

<?xml version="1.0" encoding="utf-8"?>
<security>
  <services>
    <service name="LocalFileImageService" type="ImageProcessor.Web.Services.LocalFileImageService, ImageProcessor.Web" />  
    <service prefix="media/" name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">
      <settings>
        <setting key="Container" value="azapp-umbraco-stage-tmha-001"/>
        <setting key="MaxBytes" value="8194304"/>
        <setting key="Timeout" value="30000"/>
        <setting key="Host" value="https://xxx.blob.core.windows.net/"/>
      </settings>
    </service>
    <service prefix="remote.axd" name="RemoteImageService" type="ImageProcessor.Web.Services.RemoteImageService, ImageProcessor.Web">
      <settings>
        <setting key="MaxBytes" value="4194304" />
        <setting key="Timeout" value="3000" />
        <setting key="Protocol" value="http" />
      </settings>
      <whitelist>       
      </whitelist>
    </service>   
  </services>
</security>

3) cache.config

<?xml version="1.0" encoding="utf-8"?>
<caching currentCache="DiskCache">
  <caches>
    <cache name="DiskCache" type="ImageProcessor.Web.Caching.DiskCache, ImageProcessor.Web" maxDays="365" browserMaxDays="7">
      <settings>
        <setting key="VirtualCachePath" value="~/app_data/cache" />
      </settings>
    </cache>   
  </caches>
</caching>

4) processing.config

<?xml version="1.0" encoding="utf-8"?>
<processing preserveExifMetaData="true" fixGamma="false" interceptAllRequests="true" allowCacheBuster="true">


  <plugins>
    <plugin name="Gamma" type="ImageProcessor.Web.Processors.Gamma, ImageProcessor.Web" />
    <plugin name="Alpha" type="ImageProcessor.Web.Processors.Alpha, ImageProcessor.Web" />
    <plugin name="AutoRotate" type="ImageProcessor.Web.Processors.AutoRotate, ImageProcessor.Web" enabled="true" />
    <plugin name="Background" type="ImageProcessor.Web.Processors.Background, ImageProcessor.Web">
      <settings>
        <setting key="VirtualPath" value="~/images/imageprocessor/background/" />
      </settings>
    </plugin>
    <plugin name="BackgroundColor" type="ImageProcessor.Web.Processors.BackgroundColor, ImageProcessor.Web" enabled="true" />
    <plugin name="Brightness" type="ImageProcessor.Web.Processors.Brightness, ImageProcessor.Web" />
    <plugin name="Contrast" type="ImageProcessor.Web.Processors.Contrast, ImageProcessor.Web" />
    <plugin name="Crop" type="ImageProcessor.Web.Processors.Crop, ImageProcessor.Web" enabled="true" />
    <plugin name="DetectEdges" type="ImageProcessor.Web.Processors.DetectEdges, ImageProcessor.Web" />
    <plugin name="EntropyCrop" type="ImageProcessor.Web.Processors.EntropyCrop, ImageProcessor.Web" />
    <plugin name="Filter" type="ImageProcessor.Web.Processors.Filter, ImageProcessor.Web" />
    <plugin name="Flip" type="ImageProcessor.Web.Processors.Flip, ImageProcessor.Web" />
    <plugin name="Format" type="ImageProcessor.Web.Processors.Format, ImageProcessor.Web" enabled="true" />
    <plugin name="GaussianBlur" type="ImageProcessor.Web.Processors.GaussianBlur, ImageProcessor.Web">
      <settings>
        <setting key="MaxSize" value="22" />
        <setting key="MaxSigma" value="5.1" />
        <setting key="MaxThreshold" value="100" />
      </settings>
    </plugin>
    <plugin name="GaussianSharpen" type="ImageProcessor.Web.Processors.GaussianSharpen, ImageProcessor.Web">
      <settings>
        <setting key="MaxSize" value="22" />
        <setting key="MaxSigma" value="5.1" />
        <setting key="MaxThreshold" value="100" />
      </settings>
    </plugin>
    <plugin name="Halftone" type="ImageProcessor.Web.Processors.Halftone, ImageProcessor.Web" />
    <plugin name="Hue" type="ImageProcessor.Web.Processors.Hue, ImageProcessor.Web" />
    <plugin name="Mask" type="ImageProcessor.Web.Processors.Mask, ImageProcessor.Web">
      <settings>
        <setting key="VirtualPath" value="~/images/imageprocessor/mask/" />
      </settings>
    </plugin>
    <plugin name="Meta" type="ImageProcessor.Web.Processors.Meta, ImageProcessor.Web" />
    <plugin name="Overlay" type="ImageProcessor.Web.Processors.Overlay, ImageProcessor.Web">
      <settings>
        <setting key="VirtualPath" value="~/images/imageprocessor/overlay/" />
      </settings>
    </plugin>
    <plugin name="Pixelate" type="ImageProcessor.Web.Processors.Pixelate, ImageProcessor.Web" />
    <plugin name="Quality" type="ImageProcessor.Web.Processors.Quality, ImageProcessor.Web" enabled="true" />
    <plugin name="ReplaceColor" type="ImageProcessor.Web.Processors.ReplaceColor, ImageProcessor.Web" />
    <plugin name="Resize" type="ImageProcessor.Web.Processors.Resize, ImageProcessor.Web" enabled="true">
      <settings>
        <setting key="MaxWidth" value="5000" />
        <setting key="MaxHeight" value="5000" />
      </settings>
    </plugin>
    <plugin name="Rotate" type="ImageProcessor.Web.Processors.Rotate, ImageProcessor.Web" />
    <plugin name="RotateBounded" type="ImageProcessor.Web.Processors.RotateBounded, ImageProcessor.Web" />
    <plugin name="RoundedCorners" type="ImageProcessor.Web.Processors.RoundedCorners, ImageProcessor.Web" />
    <plugin name="Saturation" type="ImageProcessor.Web.Processors.Saturation, ImageProcessor.Web" />
    <plugin name="Tint" type="ImageProcessor.Web.Processors.Tint, ImageProcessor.Web" />
    <plugin name="Vignette" type="ImageProcessor.Web.Processors.Vignette, ImageProcessor.Web" />
    <plugin name="Watermark" type="ImageProcessor.Web.Processors.Watermark, ImageProcessor.Web" />
  </plugins>
  <presets>
  </presets>
</processing>

5) root web.config

<location path="media">
    <system.webServer>
      <handlers>
        <remove name="StaticFileHandler" />
        <remove name="StaticFile" />
        <add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
        <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read" />
      </handlers>
    </system.webServer>
  </location>

6) media web.config

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <clear />
      <add name="StaticFileHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Either" requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

Also <add key="AzureBlobFileSystem.DisableVirtualPathProvider" value="true" /> in the root web.config under app settings.

Copy Link

Ganesh Mitra 50 posts 210 karma points

Jul 01, 2020 @ 07:25

Anyone please?

Copy Link

is working on a reply...

Flag this post as spam?

Image not showing from azure blob