Skip to content
Get help on Slack

Issue with serializer for images on block content in a Vue app

11 replies
Last updated: Dec 15, 2022
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
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
Dec 12, 2022, 9:59 PM
Can you share your relevant code?
Dec 12, 2022, 10:06 PM
Thanks, RD:-- MainPage.vue

// Template
SanityContent(:blocks="data.contenido" :serializers="serializers")

// Script
data: () => ({
  data: '',
  serializers: {
    types: {
      image: () =>
     import('~/components/imagen.vue'),
         }
      }}),
Component "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
Maybe this is relevant: [vue-router] &lt;router-link&gt;'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
😢 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
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
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
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.

Get started for freeExplore the demo

Was this answer helpful?