Image not show on SanityContent

[blackinitial]

Version

module: 0.10.0 nuxt: 2.15.7

Nuxt configuration

mode:

• [ x ] universal
• [ ] spa

What is expected?

my post can show image

What is actually happening?

SanityContent can render tag HTML , but src not render

Steps to reproduce

Additional information

Checklist

• [ ] I have tested with the latest Nuxt version and the issue still occurs
• [ ] I have tested with the latest module version and the issue still occurs
• [ ] I have searched the issue tracker and this issue hasn't been reported yet

[mrdannyjohnson]

@blackinitial You can address this using a custom serializer for type: image. See the full example in the documentation: https://github.com/rdunk/sanity-blocks-vue-component/tree/legacy#full-example

In my case I create a new component:

InlineImage.vue:

<template>
  <nuxt-img
    class="cover"
    :src="urlFor(asset._ref).url()"
    quality="85"
  />
</template>

<script>
import imageUrlBuilder from '@sanity/image-url'

export default {
  props: {
    asset: {
      type: Object,
      required: true
    }
  },
  methods: {
    urlFor (src) {
      const builder = imageUrlBuilder(this.$sanity.config)
      return builder.image(src)
    }
  }
}
</script>

Then, in in your page where the image is missing:

<template>
          <SanityContent
            :blocks="pages[0].body"
            :serializers="serializers"
          />
</template>

<script>
import { groq } from '@nuxtjs/sanity'
import inlineImage from '~/components/inlineImage.vue'

export default {
  components: {
    inlineImage
  },
  // getting content as normal
  async asyncData ({ $sanity, params }) {
    const query = groq`*[slug.current=="${params.slug}"&& _type=="blog"]`
    const pages = await $sanity.fetch(query)
    return { pages }
  },
  data () {
    return {
      // specify a custom serializer
      serializers: {
        types: {
          image: inlineImage
        }
      }
    }
  }
}
</script>

Hope this helps!

[MartCube]

Im having really similar setup Im using module in my nuxt.config.js like this

modules: ['@nuxtjs/sanity/module'],
sanity: {
  projectId: process.env.projectId,
  minimal: true,
  contentHepler: true,
},

Then in my page I use SanityContent for rendering, but when I try to use serializers i get error "Maximum call stack size exceeded". I also get warning in the console also like "Cannot stringify a function render", "Cannot stringify a function VueComponent" and cant trace the problem. Any help is welcomed.

<template>
        <SanityContent :blocks="content" :serializers="serializers" />
</template>

<script>
import { groq } from '@nuxtjs/sanity'
import YouTube from '@/components/YouTube'
const query = groq `...`

export default {
name: 'Index',
components: { YouTube, },
data: () => ({
  serializers: {
    types: {
      youtube: YouTube,
    },
  },
}),
async fetch() { ... }
}
</script>

UPDATE

My problem was that I was using fetch() insteed of AsyncData. You can see more on the link. https://github.com/nuxt-community/sanity-module/issues/123

[blackinitial]

@mrdannyjohnson thank bro. i was fixed the problem 👍🏻

[stephanepericat]

@mrdannyjohnson In the InlineImage component, you can also use <SanityImage />, as such:

<template>
  <SanityImage
    class="inline-image"
    :asset-id="asset._ref"
  />
</template>
<script setup>
  const props = defineProps({
    asset: Object
  })
</script>