I have been struggling to set up headless Drupal with React js. I did manage to upload the image via JSON API, as per instruction here
But I am not able to display the image. It would be great if anyone could help me with what went wrong.
For the image in code, I used base64. Whereas it has mentioned Buffer Format, I could not find out how to convert images to Buffer Format.
await axios({
method: "post",
url: baseurl.URL + '/jsonapi/media/image/field_media_image/',
headers: {
'Accept': 'application/vnd.api+json',
'Content-Type': 'application/octet-stream',
'X-CSRF-Token': csrftoken,
"Content-Disposition": 'file; filename="' + imageName + '"',
'Authorization':'Basic cmFqan989kjjhjWFuZG8hOTg0MQ==',
},
data: Buffer.from(imageToBase64,'base64')
})
.then(res => console.log(res))
.catch(err => console.log(err))
}
images?.map((item, index)=> {
return <li className="card">
<img width="100"
src={item.imgurl}
alt={item.filename} />
<div className="text-sm">{item.imgurl}</div>
</li>
})