๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

Issue with linking images in block content fields in a ready-to-import document.

7 replies
Last updated: Jul 7, 2022
Hi all ๐Ÿ‘‹ Iโ€™m creating a ready-to-import document, and everything works fine except the images inside block content fields. This is how Iโ€™m doing it:

bodyRight
is a block content field.
bodyRight: [
          {
            _key: uuidv4(),
            _type: 'customImage',
            image: {
              _type: 'image',
              _sanityAsset: 'image@file:///Users/josemendez/Documents/test_climatecheck/image1.jpeg',
            },
          },
        ],
Can any of you guys help me figure what Iโ€™m doing wrong or even if this is doable? Any help will be really appreciated
๐Ÿ™‚
PD this is my
customImage
schema:
export default {
    title: 'Custom Image',
    name: 'customImage',
    type: 'document',
    
    fields: [
      {
        name:'image',
        title: ' Image',
        type: 'image'      
      },
      {
        name: 'altText',
        type: 'string',
        title: 'Alt Text',
        options: {
          isHighlighted: true // <-- make this field easily accessible
        }
      }
    ]
  }
Jul 7, 2022, 4:53 PM
Hey
user R
! You need to first upload the image, then add a reference to the image asset inside of the document you're creating. There are a couple of examples of uploading assets here . The document object would then look like this:
bodyRight: [
          {
            _key: uuidv4(),
            _type: 'customImage',
            image: {
              _type: 'image',
              asset: {
                _ref: '<_id-of-asset>',
                _type: 'reference'
              }
            },
          },
        ],
Jul 7, 2022, 5:37 PM
Thanks
user M
, I tried this way ๐Ÿ‘‡ but still have no luck.
  const filePath1 = './image1.jpeg';

  const res1 = await client.assets.upload('image', fs.createReadStream(filePath1), {
    filename: path.basename(filePath1),
  });


  ...
  bodyRight: [
            {
              _key: uuidv4(),
              _type: 'customImage',
              image: {
                _type: 'image',
                asset: {
                  _ref: res1._id,
                  _type: 'reference',
                },
              },
            },
          ],
After running the script the document is successfully created but images inside block content fields have no asset linked to them. Any ideas of what could be happening?
Jul 7, 2022, 6:42 PM
Does the image end up uploading?
Jul 7, 2022, 6:46 PM
yes it is uploaded, I can see it in the studio
Jul 7, 2022, 6:47 PM
I think the issue is naming the field here. I used 'image' and your schema is named 'customImage'. What about:
  const filePath1 = './image1.jpeg';

  const res1 = await client.assets.upload('image', fs.createReadStream(filePath1), {
    filename: path.basename(filePath1),
  });


  ...
  bodyRight: [
            {
              _key: uuidv4(),
              _type: 'customImage',
              asset: {
                  _ref: res1._id,
                  _type: 'reference',
              },
            },
          ],
Jul 7, 2022, 6:51 PM
Thanks for your help Racheal, you were right, the first thing I needed to do was upload the file but also I needed to create the
customImage
document, and then use the
customImage
_id in the block content like this:
  const filePath1 = './image1.jpeg';

  const res1 = await client.assets.upload('image', fs.createReadStream(filePath1), {
    filename: path.basename(filePath1),
  });

  const customImage1 = {
    _id: uuidv4(),
    _type: 'customImage',
    image: {
      _type: 'image',
      asset: {
        _ref: res1._id,
        _type: 'reference',
      },
    },
  };

  // Create customImage
  const img = await client.create(customImage1);

...
bodyRight: [
          {
            _key: uuidv4(),
            _ref: img._id,
            _type: 'customImage',
          },
        ],
Jul 7, 2022, 8:13 PM
Awesome!
Jul 7, 2022, 8:14 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?