使用sanity-blocks-vue-component如何按序渲染blockContent中的图片

核心实现逻辑是给sanity-blocks-vue-component传入自定义序列化器（serializers），组件会自动按照传入的blocks数组原有顺序，匹配每个块的类型调用对应渲染规则，不需要手动提取图片调整排序。

1. 修改模板绑定 #

给组件增加serializers属性传入自定义配置：

<SanityBlocks :blocks="blocks" :serializers="serializers" />

2. 添加序列化器配置 #

在组件实例中添加serializers配置，匹配Sanity中blockContent的image类型块，复用已有的imageUrlFor方法生成可访问的图片地址渲染即可。
如果项目支持JSX可以直接按如下写法配置：

export default {
  name: 'SinglePost',
  components: { SanityBlocks },
  data() {
    return {
      loading: true,
      post: [],
      blocks: [],
    };
  },
  computed: {
    serializers() {
      return {
        types: {
          // 匹配正文里的图片类型块
          image: (data) => {
            // 按需求配置图片尺寸、裁剪规则
            const imgUrl = this.imageUrlFor(data.node.asset)
              .width(800)
              .auto('format')
              .url()
            return <img src={imgUrl} alt={data.node.alt || ''} class="post-image" />
          }
          // 其余自定义块类型的渲染规则可以继续在这里追加
        }
      }
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    imageUrlFor(source) {
      return imageBuilder.image(source);
    },
    fetchData() {
      this.error = this.post = null;
      this.loading = true;

      sanity.fetch(query, { slug: this.$route.params.slug }).then(
        (post) => {
          this.loading = false;
          this.post = post;
          this.blocks = post.body;
        },
        (error) => {
          this.error = error;
        }
      );
    },
  },
};

如果项目没有开启JSX支持，可以用Vue的h函数渲染，或者封装独立图片组件传入：

import PostImage from '@/components/PostImage.vue'

// serializers配置调整为
serializers() {
  return {
    types: {
      image: ({ node }) => h(PostImage, {
        props: {
          imageSource: node,
          alt: node.alt || '',
          caption: node.caption || ''
        }
      })
    }
  }
}

注意事项 #

• 只要GROQ查询时没有修改post.body的数组顺序，组件会自动保持文字、图片的原有排版顺序，不需要手动遍历拆分内容重排
• 如果Sanity的图片块配置了caption、credits等自定义字段，直接从序列化方法入参的node字段中取值即可渲染
• 图片的尺寸、格式、压缩规则可以直接在imageUrlFor调用链上追加配置，和@sanity/image-url的原生写法完全一致

内容的提问来源于stack exchange，提问作者erysvh