I’m using structured text for a blog like site with Nuxt. I’m having trouble getting images that are abart of the body of a structured text field to render. I’ve been referencing this example.
I’m able to render text blocks, and can see the data that is in the image. But when I try to use an image it doesn’t convert the datocms image tag into rendered html. So this is what I see on the front end.
I’m unfamiliar with the hyperscript function in vue, and I’m a little frustrated that I can’t find any great documentation for images within the structured text field.
Please help!
Here is the vue file for a single article…
<script setup>
import { h } from "vue";
import { StructuredText as DatocmsStructuredText } from "vue-datocms";
import { Image as DatocmsImage } from "vue-datocms";
const route = useRoute()
const slug = route.params.slug;
const { data, error } = await useGraphqlQuery({
query: `{
article(
filter: {slug: {eq: "${slug}"}}
) {
title
tags {
name
}
body {
blocks {
... on ImageRecord {
__typename
image {
responsiveImage {
webpSrcSet
sizes
src
width
aspectRatio
alt
title
base64
}
title
id
}
id
}
}
value
}
}
}`
});
// });
// extract the articles from the data returned by DatoCMS
const article = data.value?.article || [];
const renderBlock = ({ record }) => {
if (record.__typename === 'ImageRecord') {
return h(
'div',
{ class: "image-wrapper" },
[
h('datocms-image', { props: { data: record.image.responsiveImage } }), //not working!
]
);
}
return h(
'div',
{},
[
h('p', {}, "Don't know how to render a block!"),
h('pre', {}, JSON.stringify(record, null, 2)),
]
);
}
</script>
<template>
<div class="project-content">
{{article.title}}
<datocms-structured-text :data="article.body" :renderBlock="renderBlock" />
<!-- {{article.body}} -->
</div>
</template>
<style lang="scss">
</style>
