I am using Sitecore 10.2 in my local as headless and nextjs for frontend. I was trying experience editor, I was able to edit the components in experience editor.

Now Images are not showing in Site because I am getting only Image Path in jsonValue.

Tried adding path file for "AlwaysIncludeServerUrl", Now I am getting full path for image src, but for jsonValue still I am getting relative path.

GraphQL Code

  ... on TextField{
field(name: "Bottom Left Image") {
  ... on ImageField {
    id(format: "B")
field(name: "Animation Image") {
  ... on ImageField {

Please find screenshots of GraphQL response and Patch File.

GraphQL Response

Patch File

1 Answer 1


jsonValue will always give you raw value that is coming from Sitecore without any processing therefore you cannot configure it.

I would suggest configure serverUrl on FE side so https://sc10.localcm.dev.local will be saved somewhere. And when rendering this field just concat server Url with jsonValue.src if you really need to use this value like this...

  • Thanks Peter. We are using Nextjs-jjs Image like below. <Image field={Image.jsonValue} /> Any idea how to add server url for this component. Commented Oct 20, 2022 at 9:24
  • 1
    you can solve this by having condition whether you are in Experience Editor or not -> if you are use code you have, when you are not in EE, don't use field parameter but src instead or something similar Commented Oct 20, 2022 at 10:09
  • 1
    Thanks Peter, It worked :) Commented Oct 21, 2022 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.