Expand my Community achievements bar.

SOLVED

ImageRef in GraphQL Query not showing for SVG image

Avatar

Level 3

Created a Content Fragment Model and used a Content Reference data type. The "Accept only specified content types" is set to Image. When using the model to create a Content Fragment, it works to select typical image types such as PNG, JPG and SVG. However if a SVG is selected the GraphQL query does not display ImageRef information. It works for other image types, not SVG.

 

Model:

ClintLundmark_2-1700071604933.png

 

 

Content Fragment:

ClintLundmark_1-1700071534177.png

 

 

Query:

 

{
  imageTestList{
    items{
      title
      image1{
        ... on ImageRef {
          _path
          _publishUrl
        }
      }
      image2{
        ... on ImageRef {
          _path
          _publishUrl
        }
      }
    }
  }
}

 

 

 I have set image1 to be an SVG file and image2 to be a JPG. Here is the output:

 

Results

 

{
  "data": {
    "imageTestList": {
      "items": [
        {
          "title": "Card",
          "image1": {},
          "image2": {
            "_path": "/content/dam/wknd-shared/en/activities/camping/camp-summer-night.jpg",
            "_publishUrl": "http://localhost:4503/content/dam/wknd-shared/en/activities/camping/camp-summer-night.jpg"
          }
        }
      ]
    }
  }
}

 

 

The image1 item shows as blank, even though it is set to a SVG file.

 

Since "accept only content type" is set to Image and, when using the model I can select an SVG file, it seems like it should output ImageRef information for the SVG selected.

 

As noted in a previous post, if an SVG image is selected for a Content Reference, DocumentRef can be used to output _path, but then it does not work for other image types. In this use case a valid image type for the model is JPG, PNG or SVG.

 

This was tested in AEM 6.5.17 and 6.5.18.

1 Accepted Solution

Avatar

Correct answer by
Level 3

There is a simple work around to this issue. Add a _DocumentRef to the GraphQL query. It feels like a strange approach but it does work!

 

Query

{
  imageTestList{
    items{
      title
      image1{
        ... on ImageRef {
          _path
          _publishUrl
        }
        ... on DocumentRef {
          _path
          _publishUrl
        }
      }
      image2{
        ... on ImageRef {
          _path
          _publishUrl
        }
        ... on DocumentRef {
          _path
          _publishUrl
        }
      }
    }
  }
}

Results

{
  "data": {
    "imageTestList": {
      "items": [
        {
          "title": "Card",
          "image1": {
            "_path": "/content/dam/wknd-shared/en/view-pay-bill-green.svg",
            "_publishUrl": "http://localhost:4503/content/dam/wknd-shared/en/view-pay-bill-green.svg"
          },
          "image2": {
            "_path": "/content/dam/wknd-shared/en/activities/camping/camp-summer-night.jpg",
            "_publishUrl": "http://localhost:4503/content/dam/wknd-shared/en/activities/camping/camp-summer-night.jpg"
          }
        }
      ]
    }
  }
}

 

For image1, which is a SVG file, _DocumentRef handles the output. For image2, which is a JPG, _ImageRef handles the output.

View solution in original post

2 Replies

Avatar

Correct answer by
Level 3

There is a simple work around to this issue. Add a _DocumentRef to the GraphQL query. It feels like a strange approach but it does work!

 

Query

{
  imageTestList{
    items{
      title
      image1{
        ... on ImageRef {
          _path
          _publishUrl
        }
        ... on DocumentRef {
          _path
          _publishUrl
        }
      }
      image2{
        ... on ImageRef {
          _path
          _publishUrl
        }
        ... on DocumentRef {
          _path
          _publishUrl
        }
      }
    }
  }
}

Results

{
  "data": {
    "imageTestList": {
      "items": [
        {
          "title": "Card",
          "image1": {
            "_path": "/content/dam/wknd-shared/en/view-pay-bill-green.svg",
            "_publishUrl": "http://localhost:4503/content/dam/wknd-shared/en/view-pay-bill-green.svg"
          },
          "image2": {
            "_path": "/content/dam/wknd-shared/en/activities/camping/camp-summer-night.jpg",
            "_publishUrl": "http://localhost:4503/content/dam/wknd-shared/en/activities/camping/camp-summer-night.jpg"
          }
        }
      ]
    }
  }
}

 

For image1, which is a SVG file, _DocumentRef handles the output. For image2, which is a JPG, _ImageRef handles the output.