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?
cover.js
function Cover({ index, ...data }) {
return (
<div className={Styles.container}>
<div className={Styles.cover}>
<InlineImage
name="cover_image"
parse={media => `../assets/${media.filename}`}
uploadDir={() => "./content/assets/"}
previewSrc={(src, fieldPath, formValues) => {
const preview =
formValues.jsonNode.blocks[index].cover_image.childImageSharp
.fluid
return preview
}}
focusRing={false}
>
{props => (
<Img
fluid={props.src || data.cover_image.childImageSharp.fluid}
alt="Text Cover"
/>
)}
</InlineImage>
</div>
</div>
)
}
export const coverBlock = {
Component: ({ index, data }) => (
<BlocksControls
index={index}
focusRing={{ offset: 0, borderRadius: 0 }}
insetControls
>
<Cover index={index} {...data} />
</BlocksControls>
),
template: {
label: "Cover",
defaultItem: {
_template: "cover",
cover_image: "../assets/default.jpg",
}
}
}