I want to create an image in VueJS with data which I receive from the server. This data includes the title of the image, the type of the image (e.g. image/png) and the content of an image (which is a gibberish string).

I tried to create a method which returns a new File like so:

methods: {
    getFile(img: { content: any; title: string; type: any }): File {
      return new File([img.content], img.title, {
        type: img.type,
      });
    },
  },

And then I tried to bind the created method to the img tag like so:

<template>
  <div>
    <img :src="getFile(image)" />
  </div>
</template>

Where image is an object of type {title: string; type: string; content: string;}.

Unfortunately I receive the following error:

Invalid prop: type check failed for prop "src". Expected String, Object, got File

How can I create an image file and bind it to the View to display it?

Thanks for any help!