Dispatcher caching issue while displaying the image renditions in AEM
Dispatcher caches a folder instead of a file for images under /content/dam in certain scenarios.
For example, you have these URLs:
/content/dam/Albin/Untitled.jpg - Original image
/content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png - Rendition for 1x devices.
Sometimes the second URL is cached, so the original image URL cannot be cached.
- AEM 6.0 SP3
- Dispatcher 4.1.11 for Apache 2.4 on Linux x86 64 bit
The below scenario is a common cause of this issue:
If the image is first accessed from the mobile devices, then Untitled.jpg folder is created to cache the renditions image. Rendition images are matched for mobile devices. For example, this file would be cached /content/dam/Albin/Untitled.jpg/jcr:content/renditions/cq5dam.thumbnail.319.319.png and Untitled.jpg would be cached as a folder, not a file.
While the image is getting accessed from desktop browsers, then the dispatcher tries to return the folder Untitled.jpg as an image. For example, /content/dam/Albin/Untitled.jpg, the original image is matched for desktop browsers. So, the image link is broken in the browser.
Alternatively, if the image is first accessed from the desktop browser, then dispatcher caches Untitled.jpg as an image. The subsequent request to the rendition image fails as the image doesn't exist in the dispatcher cache. The image is retrieved from the publish instance for rendering. Rendition images are not cached in this scenario as Untitled.jpg and are created as an image.
In this scenario, it is suggested to access the images using selectors instead of directly referencing the renditions in DAM. This would enable access and caching for all, renditions, and original image as well. Below is the detailed explanation for the same.
For example, if the image in AEM to be accessed is: /content/dam/mysite/image.png/_jcr_content/renditions/image.thumbnail.48.48.png
To use the mentioned approach, the URL used is of the format below:
For renditions: /content/dam/mysite/image.png.thumb.48.48.png
For original image: /content/dam/mysite/image.png
Refer the working example in OOTB AEM instance:
Original Image: /content/dam/geometrixx-outdoors/activities/snowboarding/PDP_1_c05.jpg
Rendition Using Selectors: /content/dam/geometrixx-outdoors/activities/snowboarding/PDP_1_c05.jpg.thumb.48.48.png
Rendition with different Height & Width, 140.100: /dam/geometrixx-outdoors/activities/snowboarding/PDP_1_c18.jpg.thumb.100.140.png (Note: Height-Width are reversed in this case)
In case, this issue is encountered in other scenarios, then, to avoid 403 errors caused by the folders, you could add DirectorySlash Off directive in the virtualhost configuration used by AEM in Apache HTTP Server. That would help avoid serving a 403 response instead of the original image. See this article for more details.