Image not working when fetching it with GraphQL in connected mode

Question

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?

Answer 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 }} />

Answer 2

This was a bug in Sitecore JSS and fixed in version 19.0.0: https://github.com/Sitecore/jss/pull/808

In setupProxy.js you probably have this:

// media items
app.use(proxy('/-', { target: config.sitecoreApiHost }));

This should be changed to this:

// media items
app.use(proxy('/-', { target: config.sitecoreApiHost, changeOrigin: true }));