InlineImage block only updates to correct image on page refresh

Hi! Was updating an old project with the new Media Manager api (which is awesome btw!) and it seems as though the rendered image from my <InlineImage> block is a step behind the actual state. To get the current image you have to refresh the page. Possibly related to this issue? Surface-wise at least, the behavior is the same.

  • The JSON data updates on the backend
  • Getting a Warning: Each child in a list should have a unique "key" prop. in console each time I click image to update file. (Not sure if even related, but figured I’d mention)
  • Code from my block component below. Am I passing previewSrc the correct way?


function Cover({ index, }) {
  return (
    <div className={Styles.container}>
      <div className={Styles.cover}>
          parse={media => `../assets/${media.filename}`}
          uploadDir={() => "./content/assets/"}
          previewSrc={(src, fieldPath, formValues) => {
            const preview =
            return preview
          {props => (
              fluid={props.src || data.cover_image.childImageSharp.fluid}
              alt="Text Cover"

export const coverBlock = {
  Component: ({ index, data }) => (
      focusRing={{ offset: 0, borderRadius: 0 }}
      <Cover index={index} {} />
  template: {
    label: "Cover",
    defaultItem: {
      _template: "cover",
      cover_image: "../assets/default.jpg",

Hey @Alex, apologies for the delay in getting back to this post. I think what you’re seeing is related to this issue. We haven’t been able to dig into the cause of that bug yet but feel free to take a look!