Closed blackinitial closed 2 years ago
@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!
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>
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
@mrdannyjohnson thank bro. i was fixed the problem 👍🏻
@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>
Version
module: 0.10.0 nuxt: 2.15.7
Nuxt configuration
mode:
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