Issue with linking images in block content fields in a ready-to-import document.
7 replies
Last updated: Jul 7, 2022
J
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:
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
bodyRightis a block content field.
bodyRight: [
{
_key: uuidv4(),
_type: 'customImage',
image: {
_type: 'image',
_sanityAsset: 'image@file:///Users/josemendez/Documents/test_climatecheck/image1.jpeg',
},
},
],🙂
PD this is my
customImageschema:
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
J
Thanks
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?
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',
},
},
},
],Jul 7, 2022, 6:42 PM
Does the image end up uploading?
Jul 7, 2022, 6:46 PM
J
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
J
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
customImagedocument, 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.