Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Issue with displaying the author's photo in a blog article

11 replies
Last updated: Apr 24, 2023
Hey everyone, can anyone help me solve this issue?
*DESIRED RESULT*: I want the author’s photo to be displayed with each blog article. (Example image attached)

*ISSUE*: The author’s image is not displaying.

Here is my blog page schema:
const blogMain = {
    name: 'post',
    title: 'Post',
    type: 'document',
    fields: [
        name: 'title',
        title: 'Title',
        type: 'string',
        name: 'slug',
        title: 'Slug',
        type: 'slug',
        options: {
          source: 'title',
          maxLength: 96,
        name: 'content',
        title: 'Content',
        type: 'array',
        of: [{ type: 'block' }],
        name: 'excerpt',
        title: 'Excerpt',
        type: 'string',
        name: 'coverImage',
        title: 'Cover Image',
        type: 'image',
        options: {
          hotspot: true,
        fields: [
                name: "alt",
                title: "Alt",
                type: "string",
        name: 'date',
        title: 'Date',
        type: 'datetime',
        name: 'author',
        title: 'Author',
        type: 'reference',
        to: { type: 'author' },
    preview: {
      select: {
        title: 'title',
        author: 'author.name',
        media: 'coverImage',
      prepare(selection: { author: any }) {
        const { author } = selection
        return { ...selection, subtitle: author && `by ${author}` }

  export default blogMain

And here is my GROQ:
export async function getPosts(): Promise<Post[]> {
    return createClient(clientConfig).fetch(
        groq`*[_type == "post"]{
            "slug": slug.current,
            "coverImage": coverImage.asset->url,
            "author": author->{name, picture},

Here’s my component in Next:
const BlogPosts = async () => {
    const posts = await getPosts();
    const displayPosts = posts.map((post) => {
        return (
            <div className="max-w-sm rounded overflow-hidden shadow-lg">
                    {post.coverImage && (
                            className="object-cover rounded-lg border border-gray-500"
                    <div className="px-6 py-4">
                        <div className="font-bold text-xl mb-2">
                            className="object-cover rounded-lg border border-gray-500"
                        <div className="font-bold text-sm mb-2">
                        <p className="text-gray-700 text-base">

    return <div>{displayPosts}</div>;

export default BlogPosts;

Apr 23, 2023, 8:31 PM
inspecting the html in chrome what does the src= value have? when console logging the post what is the value for coverImage?
Apr 23, 2023, 8:38 PM
Hi Parker,chrome devtools shows:

<img alt="something" width="50" height="50" decoding="async" data-nimg="1" class="object-cover rounded-lg border border-gray-500" src="" style="">
Looks like it’s going straight the alt..


Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <div>. See <https://reactjs.org/link/warning-keys> for more information.
    at div
Apr 23, 2023, 8:44 PM
sorry I pasted the wrong source, please check again if you have previously
Apr 23, 2023, 8:46 PM
I’m learning typescript on this project as well, is this a typescript issue?
Apr 23, 2023, 8:51 PM
Here’s my Types file:
Apr 23, 2023, 8:53 PM
When I log the author image, I’m getting the object back:
  crop: { top: 0, left: 0, bottom: 0, _type: 'sanity.imageCrop', right: 0 },
  hotspot: { x: 0.5, y: 0.5, height: 1, _type: 'sanity.imageHotspot', width: 1 },
  _type: 'image',
  asset: {
    _ref: 'image-efbbe065b6589bd853935500e85084e4566cf5e4-512x512-png',
    _type: 'reference'
Apr 23, 2023, 10:16 PM
You’ll need to expand the author’s image’s asset or pass the asset to a configured imageUrl builder function. Expanding the asset would look like this:
   'url': asset->url
Apr 24, 2023, 4:39 PM
Thanks RD. That’s good to know and thanks for your help. I wound up using the imageUrl builder but needed to use the createClient from @sanity/client as well. Is this the standard practice?
const builder = imageUrlBuilder(createClient({
        projectId: "abcd1234",
        dataset: "production",
Apr 24, 2023, 4:43 PM
Yep, that will work! You can also just reuse the client you’ve already configured for your project if you have one.
Apr 24, 2023, 4:45 PM
Thank you very much.
Apr 24, 2023, 4:46 PM
You’re welcome!
Apr 24, 2023, 4:46 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?