Problem with images in listgroups/blocks

Hey !

I’m using tina-cms with gatsby and ran into problems with images in listgroups as they are returned as strings instead of files.
Am I doing something wrong or did anyone have the same problem?

GraphQL-Query

const result = useStaticQuery(graphql`
  query {
    data: dataJson(key: { eq: "myKey" }) {
      benefits {
        image {
          childImageSharp {
            fluid {
	    	  src
            }
          }
       }
     }
     fileRelativePath
     rawJson
    }
  }
`)

LocalJsonForm

const [data, form] = useLocalJsonForm(result.data, {
  label: 'Edit Page',
  fields: [
    {
      label: 'Benefits',
      name: 'rawJson.benefits',
      component: 'blocks',
      fields: [{
        label: 'Image',
        name: 'image',
        component: 'image',
    
        previewSrc: (formValues, { input }) => {
          const path = input.name.replace('rawJson', 'jsonNode')
          const gatsbyImageNode = get(formValues, path)
          if (!gatsbyImageNode) return ''
          // specific to gatsby-image
          return (typeof gatsbyImageNode === 'string') ? '' : gatsbyImageNode.childImageSharp.fluid.src
        },
    
        uploadDir: () => {
          return '/content/images/'
        },
    
        parse: filename => `../images/${filename}`,
      }],
      itemProps: item => ({
        label: item.image,
      }),
      defaultItem: () => ({
        image: ""
      }),
    },
  ],
})

Json

{
  "benefits": [
    {
      "image": "../images/image-1.jpg",
    }
  ]
}

Hi @mariusmatu! At first glance this code looks okay. It is expected that the image paths are stored as strings in the source file. The parse function in your image field config handles how those strings are formatted in the source file. The previewSrc function may be where you have an issue. I would take a closer look at the formValues to see how you can manipulate that data to get the childImageSharp.fluid.src value you need.

1 Like

This might not be a problem with TinaCMS, but with the Gatsby sharp plugin or transformer. It’s a very common error and I’ve run into it plenty of times. Try the troubleshooting tips on the Gatsby page:

Also, I’ve had this issue as a result of duplicate names for different fields in different components. Hope this helps.

1 Like