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
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
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
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
Great! Thank you for sharing your solution!
Dec 15, 2022, 6:51 PM
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.