Issue with preview image after Sanity upgrade, resolved with help from community.

35 replies
Last updated: Feb 8, 2022
Hi there! anyone else having issues with the image in the preview-list-view after the upgrade of a week ago (v2.26.0 ). Since I upgraded my previews have disappeared (title and image). I get an error in console but it's not too helpful. Also, if I console log the argument
selection
from the function
prepare(selection)
I still get the title and URL to the image like before the upgrade so the info are there...Am I missing something?
Feb 8, 2022, 5:25 PM
Mind sharing a screenshot of the preview object?
Feb 8, 2022, 5:54 PM
Thanks for helping out!
preview: {
    select: {
      title: 'basic_info.name',
      logoUrl: 'white_label.logo.asset.url',
    },
Feb 8, 2022, 6:43 PM
And this is my prepare function. When I log the
title
and
logoUrl
I see in the console the actual title I inserted and the url of the image
 prepare(selection) {
      const { title, logoUrl } = selection;
      return {
        title,
        media: logoUrl ? (
          <img src={logoUrl} alt={`${title}-logo`} />
        ) : (
          FaBuilding
        ),
      };
    },
Feb 8, 2022, 6:48 PM
user J
, You are selecting sub items from the fields.
basic_info.name
and
white_label.logo.asset.url
.
can you comment out the return and change title to
basic_info
and
white_label
only. after that console log title and logoUrl. Do you get one or the another?
Also, good to know. You should check if
LogoUrl
is available outside the return. You are also not checking it alt title is empty. This can give you errors.

Can you try the following, this is from my Studio. I have also noticed if you check inside the return it will lead to errors on the console. Let me know if this works.
prepare(selection) {
  const { title, logoUrl } = selection;

  const hasTitle = title ? `${title}-logo` : `logo`;

  const hasLogo = () =>
    logoUrl ? <img src={logoUrl} alt={hasTitle} /> : FaBuilding;

  return {
    title,
    media: hasLogo,
  };
},
Feb 8, 2022, 7:01 PM
let me try
Feb 8, 2022, 7:06 PM
You can also just directly select the image field and title to have them show up, no
prepare
function necessary:

preview: {
    select: {
      title: 'basic_info.name',
      image: 'white_label.logo',
    },
    prepare({title, image}) {
      return {
        title,
        media: image ? image : FaBuilding
      }
    }
}
Feb 8, 2022, 7:08 PM
Ah I see now, you do have some logic in your prepare!
Feb 8, 2022, 7:09 PM
You can also just directly select the image field and title to have them show up, no
prepare
function necessary:
preview: {
    select: {
      title: 'basic_info.name',
      media: 'white_label.logo',
    },
Feb 8, 2022, 7:08 PM
let me try
Feb 8, 2022, 7:06 PM
[tweaked my response to include your fallback icon 😅]
Feb 8, 2022, 7:13 PM
user Q
I console logged
basic_info
 and 
white_label
and I receive all the info without issues. The changes you suggested don't work unfortunately.
user M
thanks for helping out too! your changes removed the nasty error, but still the image is not previewed in the list. I thought we had to pass the URL of the image in the src?
Feb 8, 2022, 7:17 PM
No, you can directly pass the image field. From the docs (below the Gotcha in this link):
The easiest way to show an image in the preview is to assign a field containing an image to the
media
property. The different views take care of a proper rendering of the image, including any
hotspot
and
crop
specifics.
Feb 8, 2022, 7:19 PM
When I console.logged the image from within the
prepare
and I realised I get undefined with Racheal' changes, which explains why the error has disappeared: the ternary is picking the
faBuilding
Feb 8, 2022, 7:20 PM
user M
unfortunately even with the changes you suggested the same error persists. It was working fine before I updated to v2.26.0 today
Feb 8, 2022, 7:26 PM
If I only preview title it works okay, that is why I think that is something to do with the media
Feb 8, 2022, 7:27 PM
Can you try selecting
white_label.logo.asset
?
Feb 8, 2022, 7:29 PM
user J
Try optional chaining with Javascript.
white_label.logo?.asset
to check if value exists inside the
white_label
object.
Feb 8, 2022, 7:31 PM
I tried that and I also tried
asset.url
. Same error.
white_label.logo.asset
return the asset object
while white_label.logo.asset.url
gives me the image in the format URL. the values are passing through, just somehow the
<img/>
doesn't read it.

user Q
I tried that too. The result is that I always get the favicon as somehow the
logoUrl
has a value of
undefined
(even if the image is there)
Feb 8, 2022, 7:33 PM
user J
Could you please show me the object
white_label
?
Feb 8, 2022, 7:34 PM
I was checking it out again to see if I messed up the image field. I'll paste only some of it as it's quite big:

 {
      name: 'white_label',
      title: 'Whitelabel',
      type: 'object',
      options: { collapsible: true, collapsed: true },
      fields: [
        {
          name: 'logo',
          title: 'Logo',
          description:
            " The logo set here is ONLY displayed in the CMS.",
          type: 'image',
          validation: (Rule) => Rule.required(),
        },
....(more fields here)
]
}
Feb 8, 2022, 7:35 PM
Thank you both for helping, I really appreciate it
Feb 8, 2022, 7:37 PM
Thank you both for helping, I really appreciate it
Feb 8, 2022, 7:37 PM
aaaaaaaaaaaaaah fixed it!!!!!
Feb 8, 2022, 7:40 PM
I see it… it should be logo only.
Feb 8, 2022, 7:40 PM
If I am not wrong 🙂
Feb 8, 2022, 7:40 PM
image: “logo” the field name only is required to make it work.
Feb 8, 2022, 7:41 PM
reviewed the file top to bottom and realised the import of React at the top of the field disappeared!! The sintax of the
preview
and
prepare
was correct 👀
Feb 8, 2022, 7:42 PM
You sure you need the white_label.logo? You are using grouped items right?
Feb 8, 2022, 7:42 PM
Great job 😄
Feb 8, 2022, 7:43 PM
Feeling very dumb at the moment 😅 Thank you very much for your help, I like the new syntax in my
prepare
function and I learned something new. Have a great evening!
Feb 8, 2022, 7:44 PM
You are not, have the same thing every single day…. 😄
Feb 8, 2022, 7:44 PM
Life of a developer I guess 🤣
Feb 8, 2022, 7:46 PM
user J
Yup making the same mistakes every single day even after 10 years still Stackoverflow for me 😄
Feb 8, 2022, 7:46 PM
Stackoverflow
, what a magnificent invention
Feb 8, 2022, 7:47 PM
Glad you got it sorted out
user J
!
Feb 8, 2022, 8:11 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?