Issue with preview image after Sanity upgrade, resolved with help from community.
35 replies
Last updated: Feb 8, 2022
D
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
selectionfrom 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
N
Mind sharing a screenshot of the preview object?
Feb 8, 2022, 5:54 PM
D
Thanks for helping out!
preview: { select: { title: 'basic_info.name', logoUrl: 'white_label.logo.asset.url', },
Feb 8, 2022, 6:43 PM
D
And this is my prepare function. When I log the
titleand
logoUrlI 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
N
user J
, You are selecting sub items from the fields. basic_info.nameand
white_label.logo.asset.url.
can you comment out the return and change title to
basic_infoand
white_labelonly. after that console log title and logoUrl. Do you get one or the another?
Also, good to know. You should check if
LogoUrlis 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
D
let me try
Feb 8, 2022, 7:06 PM
R
You can also just directly select the image field and title to have them show up, no
preparefunction 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
R
Ah I see now, you do have some logic in your prepare!
Feb 8, 2022, 7:09 PM
R
You can also just directly select the image field and title to have them show up, no
preparefunction necessary:
preview: { select: { title: 'basic_info.name', media: 'white_label.logo', },
Feb 8, 2022, 7:08 PM
D
let me try
Feb 8, 2022, 7:06 PM
R
[tweaked my response to include your fallback icon 😅]
Feb 8, 2022, 7:13 PM
D
user Q
I console logged basic_infoand
white_labeland 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
R
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 themediaproperty. The different views take care of a proper rendering of the image, including anyhotspotandcropspecifics.
Feb 8, 2022, 7:19 PM
D
When I console.logged the image from within the
prepareand 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
D
user M
unfortunately even with the changes you suggested the same error persists. It was working fine before I updated to v2.26.0 todayFeb 8, 2022, 7:26 PM
D
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
R
Can you try selecting
white_label.logo.asset?
Feb 8, 2022, 7:29 PM
N
user J
Try optional chaining with Javascript. white_label.logo?.assetto check if value exists inside the
white_labelobject.
Feb 8, 2022, 7:31 PM
D
I tried that and I also tried
asset.url. Same error.
white_label.logo.assetreturn the asset object
while white_label.logo.asset.urlgives 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 logoUrlhas a value of
undefined(even if the image is there)
Feb 8, 2022, 7:33 PM
N
user J
Could you please show me the object white_label?
Feb 8, 2022, 7:34 PM
D
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
D
Thank you both for helping, I really appreciate it
Feb 8, 2022, 7:37 PM
D
Thank you both for helping, I really appreciate it
Feb 8, 2022, 7:37 PM
D
aaaaaaaaaaaaaah fixed it!!!!!
Feb 8, 2022, 7:40 PM
N
I see it… it should be logo only.
Feb 8, 2022, 7:40 PM
N
If I am not wrong 🙂
Feb 8, 2022, 7:40 PM
N
image: “logo” the field name only is required to make it work.
Feb 8, 2022, 7:41 PM
D
reviewed the file top to bottom and realised the import of React at the top of the field disappeared!! The sintax of the
previewand
preparewas correct 👀
Feb 8, 2022, 7:42 PM
N
You sure you need the white_label.logo? You are using grouped items right?
Feb 8, 2022, 7:42 PM
N
Great job 😄
Feb 8, 2022, 7:43 PM
D
Feeling very dumb at the moment 😅 Thank you very much for your help, I like the new syntax in my
preparefunction and I learned something new. Have a great evening!
Feb 8, 2022, 7:44 PM
N
You are not, have the same thing every single day…. 😄
Feb 8, 2022, 7:44 PM
D
Life of a developer I guess 🤣
Feb 8, 2022, 7:46 PM
N
user J
Yup making the same mistakes every single day even after 10 years still Stackoverflow for me 😄Feb 8, 2022, 7:46 PM
D
Stackoverflow, what a magnificent invention
Feb 8, 2022, 7:47 PM
R
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.