0

I'm really stuck at converting a PNG image from unicode (I think) to an object URL. I'm using Vue js to convert it. The data is returned by a .NET application using

return new FileContentResult(ms.ToArray(), "image/png");

In my frontend / client app, I can see that I receive this response enter image description here

But what now? :) I tried a lot of things, without any luck. I'm not too familiar with these types of conversion... I did it once and completely forgot how.
ps: If I use Postman, the image is loaded correctly.
that's what I tried until now:

// for displaying IMGs
      <img :src="files.quickPreview_1" />
      <img :src="files.quickPreview_2" />

// vue data
  data() {
    return {
      files: {
        quickPreview_1: null,
        quickPreview_2: null
      }
    };
  },

// conversions
          var utf8 = unescape(encodeURIComponent(response.data));

          var arr = [];
          for (var i = 0; i < utf8.length; i++) {
            arr.push(utf8.charCodeAt(i));
          }

          // try 1
          const blob1 = new Blob(arr, {
            type: response.headers["content-type"]
          });
          this.files.quickPreview_1 = URL.createObjectURL(blob1);

          // try 2
          const byteArray = new Uint8Array(arr);
          const blob2 = new Blob(byteArray, {
            type: response.headers["content-type"]
          });
          this.files.quickPreview_2 = URL.createObjectURL(blob2);

and the current results if I use console.log: enter image description here

johnykes
  • 1,151
  • 1
  • 8
  • 22
  • Unicode is a system for expressing **text** in bytes. Images are not text. That is just the binary data of an image file. – Quentin Feb 08 '22 at 12:11

0 Answers0