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
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
B
Oh, thanks for your answere. Is there any aditional information that I can provide you?
Dec 13, 2022, 10:35 PM
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
Sanityā build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.