0

This is on sitecore 10 / jss 14.0.1

I'm using JSS in connected mode (jss start:connected) since I will be fetching data with GraphQL. In my graphQL I fetch an image using this code:

  item(path: $item) {
    children(includeTemplateIDs: "BFE34C57618755379F03394D76305CA0") {
      ... on EventRoute {
        image {
          rendered(fieldRendererParameters:"w=400&h=245")
          width
          height
          alt
          src(maxWidth:400, maxHeight:245)
          editable
          jss
        }

The returned JSON looks like this:

{
 "rendered": "<img src=\"/-/media/itumx/data/media/img/itumx_ux_o3.jpg?h=245&amp;iar=0&amp;w=400&amp;hash=ECA58D918C966E2EA924AA5A0978A2C9\" alt=\"Kundeinskt\" width=\"400\" height=\"245\" />",
 "width": null,
 "height": null,
 "alt": "",
 "src": null,
 "editable": "<img src=\"/-/media/itumx/data/media/img/itumx_ux_o3.jpg?h=1189&amp;iar=0&amp;w=2560&amp;hash=A7E279E868E8BEE064F566CEE8C8FCA3\" alt=\"Kundeinskt\" width=\"2560\" height=\"1189\" />",
 "jss": {
  "value": {
   "src": "https://cm.itumxjss.localhost/-/media/itumx/data/media/img/itumx_ux_o3.jpg?h=1189&iar=0&w=2560&hash=A7E279E868E8BEE064F566CEE8C8FCA3",
   "alt": "Kundeinskt",
   "width": "2560",
   "height": "1189"
  }
 },
 "__typename": "ImageField"
}

I then try to render it using :

<Image field={image} height="245" width="400" imageParams={{ w: 400, h: 245 }}/>

This is then rendered as:

<span class="sc-image-wrapper">
   <img alt="Kundeinskt" width="400" height="245" src="/-/jssmedia/itumx/data/media/img/itumx_ux_o3.jpg?h=245&amp;iar=0&amp;w=400&amp;hash=A7E279E868E8BEE064F566CEE8C8FCA3">
</span>

This then gives me a not found. However when I deploy the app and runs it, everything works fine.

How do I get images to render in connected mode?

1

You have to use the jss field and then it starts working:

<Image field={image.jss} height="245" width="400" imageParams={{ w: 400, h: 245 }} />
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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