10 Replies Latest reply on Jul 5, 2018 12:29 PM by nicolec5933381

    AEM Image Component with uploaded SVG

    jamiec4451712 Level 1

      On an AEM 6.4 site, I am trying to allow authors to upload SVG images to an image component.


      The dialog that accepts the image is:



      The component simply takes the URL of the uploaded image and places it into an image element.

      <img src="${component.image}"/>


      When the author uploads the image, it displays in the dialog fine, and the image uploads normally. However, when the component is rendered, or when the dialog is re-opened, Chrome throws an error loading the image if I use a full path to the asset. This is because either the image is served with the header: Content-Disposition: attachment or the request fails with a 500 (image type not supported) .I completely understand the role that the content-disposition filter plays in security of the DAM, and I don't want to disable it, but there doesn't appear to be a way to disable that security for a specific mime-type.


      Here's what I've tried:


      - Online, a lot of people talk about configuring the Apache Sling Content Disposition Filter. This does not work, because the filter does not permit wildcards, and I can't specify every path of every SVG asset that will be uploaded.

      - I looked into the Adobe CQ DefaultAttachmentTypeBlacklistService, as it seems like it might be related, but removing SVG from the blacklist there did not resolve the problem.

      - I tried using the built in image component, but it doesn't support SVGs.

      - I tried using the default GET for images, like at the URL .../_jcr_content/par/al_container/al-container-par/al_image_content/al_image_content.img.p ng, I changed ".png" to ".svg": al_image_content.img.svg, but I get a 500 error saying the image type is not supported.


      All I need is for an author to be able to upload an SVG and have AEM serve that SVG back properly. There must be a way to do this. Anyone have any ideas?