2

How can i display my image which the image call from database but only return alot question mark... see here >>> Resdata

If i direct call the API using the link it come out it result:

{"success":false,"message":"No token provided"}
async getImage(){
const res = await MemberService.getmemberprofileimage('1667546872110-agape-1667546868823.jpeg').then(function(response){
        return response;
      })
      if(res.status == 200){
        if(res.data.success != false){
          this.gImage = res.data;
          console.log('Res:', res);
        }
      }
    }

ReturnData:

ReturnData

Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
Meow
  • 141
  • 9
  • your response seems to be binary data. One way could be converting that to base64 data and pass it to an `img` element's `src` – GrafiCode Nov 07 '22 at 09:55
  • Does this answer your question? [Convert binary data to base64 with javascript](https://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript) – GrafiCode Nov 07 '22 at 09:56
  • @GrafiCode the code change to base64 but I cant show on tag – Meow Nov 07 '22 at 10:13
  • @Meow Could you share the full URL get an image or full data from the response? – Chuong Tran Nov 07 '22 at 10:56
  • @ChuongTran hi, I update the full data you can check the ReturnData image – Meow Nov 08 '22 at 02:36

2 Answers2

0

Try the following to convert the binary data to base64 data.

res.end(res.data.toString('base64'));
0

In order to show binary data on an img tag you could use URL.createObjectURL in your FE code to display the image

const imageSrc = URL.createObjectURL(res.data);
<img src=`${imageSrc}` />
Dragos Podaru
  • 392
  • 3
  • 11