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 {
          src(maxWidth:400, maxHeight:245)

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

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?

2 Answers 2


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

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 }));

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.