Unable to fetch Image with server url in GraphQL

Question

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

Title:field(name:"Title"){
  ... on TextField{
    value
  }
}
field(name: "Bottom Left Image") {
  ... on ImageField {
    id(format: "B")
    name
    src
  }
}
field(name: "Animation Image") {
  ... on ImageField {
    jsonValue
  }
}

Please find screenshots of GraphQL response and Patch File.

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...