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, --> Noticias --> 2.d item, it renders the images properly), but if I use the diret link to the item (eg, ), 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
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: () =>
Component "imagen.vue"

<template lang="pug">
SanityImage(:asset-id="asset._ref" w="660")

export default {
  props: ['asset']

Dec 12, 2022, 10:12 PM
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: .
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

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.

Was this answer helpful?