1

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>
    })

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.