0

I am using mongoose where I stored some images.

The model is:

const PictureSchema = new mongoose.Schema({
  type: {
    type: String,
    required: 'Type of image required'
  },
  name: {
    type: String,
    required: 'Image name is required'
  },
  buffer: {
    type: String,
    data: Buffer,
    required: 'Image requires buffer'
  },
})

The object saved in the DB is:

{
  "_id":613c8ae50329da46675f3dbd",
  "type":"jpg",
  "name":"name_of_file",
  "buffer":"����\u0000\u0010JFIF\u0000\u0001\u0001\u0001\u0000`\u0000`\u0000\u0000��\u0000;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 75\n��\u0000C\u0000\b\u0006\u0006\u0007\u0006\u0005\b\u0007\u0007\u0007\t\t\b\n\f\u0014\r\f\u000b\u000b\f\u0019\u0012\u0013\u000f\u0014\u001d\u001a\u001f\u001e\u001d\u001a\u001c\u001c $.' \",#\u001c\u001c(7),01444\u001f'9=82<.342��\u0000C\u0001\t\t\t\f\u000b\f\u0018\r\r\u00182!\u001c!22222222222222222222222222222222222222222222222222��\u000" //More data...
}

I already have a route on my frontend requesting for the document above. But when used <Avatar alt={image.name} src={image.buffer} /> the property src doesn't load the image.

fp007
  • 412
  • 1
  • 4
  • 18
  • See [How to convert a file buffer to tag src?](https://stackoverflow.com/a/57704306/11667949). [A 2 minute googling always helps](https://www.google.com/search?q=mongo+db+buffer+to+img+src&oq=mongo+db+buffer+to+img+src&aqs=edge..69i57.6723j0j1&sourceid=chrome&ie=UTF-8) – Shivam Jha Sep 11 '21 at 11:56
  • I tried it but didn't work. Error: `Uncaught TypeError: First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.`. How I convert type string `����\u0000\u0010JFIF\u0000\u0001\u0001\u0001\u0000`\u0000`\u0000` to an array buffer – fp007 Sep 11 '21 at 17:29
  • I already store it as a base64 string and is not working either. – fp007 Sep 11 '21 at 17:51

0 Answers0