Issue with serializer for images on block content in a Vue app
11 replies
Last updated: Dec 15, 2022
B
Hi! I need help with serializer for images on block content. It is working when I navigate the app (eg, https://rednacionaldemujeres.org --> Noticias --> 2.d item, it renders the images properly), but if I use the diret link to the item (eg, https://rednacionaldemujeres.org/noticias/mujeres-paz-y-seguridad-entre-luces-y-sombras-mujeres-rurales-santandereanas ), it throws an error ("Cannot stringify a function image"). I don't understand whats going on. Any thoughts?
Dec 12, 2022, 9:58 PM
B
I'm using this https://v0.sanity.nuxtjs.org/helpers/portable-text
And the serializer component is just this line:
SanityImage(:asset-id="asset._ref" w="660").img
And the serializer component is just this line:
SanityImage(:asset-id="asset._ref" w="660").img
Dec 12, 2022, 9:59 PM
R
Can you share your relevant code?
Dec 12, 2022, 10:06 PM
B
Thanks, RD:-- MainPage.vue
Component "imagen.vue"
// Template SanityContent(:blocks="data.contenido" :serializers="serializers") // Script data: () => ({ data: '', serializers: { types: { image: () => import('~/components/imagen.vue'), } }}),
<template lang="pug"> SanityImage(:asset-id="asset._ref" w="660") </template> <script> export default { props: ['asset'] } </script>
Dec 12, 2022, 10:12 PM
B
Maybe this is relevant: [vue-router] <router-link>'s event prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link .
Dec 12, 2022, 10:14 PM
B
π’ I can't find the answer anywhere
Dec 13, 2022, 9:32 PM
R
I'm unfortunately not clear on what's causing it yet either π
Dec 13, 2022, 10:13 PM
B
Oh, thanks for your answere. Is there any aditional information that I can provide you?
Dec 13, 2022, 10:35 PM
R
No, I think it's a matter of combing through your code to find what may be wrong. Unfortunately, my time's been super limited this week because of a high volume of support requests. I'll do my best, though!
Dec 13, 2022, 10:43 PM
B
Is there any other way to render images between blocks? That's the only reason why I'm using the serializer
Dec 14, 2022, 5:20 PM
B
Ohhh, I found the problem. I was fetching Sanity with "async fetch()" instead of "asyncData()", so I guess the fetching was not on server but on client side. I changed it and it worked.
Dec 15, 2022, 1:37 AM
R
Great! Thank you for sharing your solution!
Dec 15, 2022, 6:51 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.