Add serializer to block to handle Images from sanity about sanity HOT 4 OPEN

@safejace would you mind explaining a bit how you were able to do so? I'm trying for SanityContent to work with images in body but I still have only an empty tag

from sanity.

hmmm i don't see it in my code right now, but it would look something like this:

CmsContent.vue

<script setup lang="ts">

const serializers = {
  types: {
    myImage: resolveComponent('myImage'),
  },
}
</script>

<template>
  <div v-bind="$attrs" class="cms-content">
      <SanityContent :blocks="blocks" :serializers="serializers" />
  </div>
</template>

MyImage.vue

<script setup lang="ts">
const props = defineProps<{
  src: {
    asset: {
      _ref: string
    }
  }
  alt?: string
  width?: number
  height?: number
}>()
</script>

<template>
  <nuxt-img provider="sanity" :src="props.src.asset._ref" :alt="props.alt" />
</template>

from sanity.

@safejace Thanks for a quick response :). But the sanitizer like that doesn't work. I'm also not sure exactly how it works. so the sanitizer props should detect the root tag of the provided component and if it's an img it would replace all images inside conted with the provided component?

I do have

  sanity: {
    projectId: 'xxx'
  },
  image: {
    sanity: {
      projectId: 'xxx',
      // Defaults to 'production'
      // dataset: 'development'
    }
  },

In my nuxt.config.ts

from sanity.

not sure if it was a typo... but you are saying sanitizer.... it's a serializer

from the module doc: https://sanity.nuxtjs.org/helpers/portable-text#example-with-custom-serializers

the [serializer] props should detect the root tag of the provided component and if it's an img it would replace all images inside conted with the provided component?

that sounds correct.

the <SanityContent> component doesn't know how to render the image. you need to pass in a component that does know.

from sanity.