Transform the binary image data sent by the server into an <img> element without using base64 encoding

Question

Transform the binary image data sent by the server into an <img> element without using base64 encoding

It's been a challenge trying to find a reliable method for adding custom request headers to img src, so I'm experimenting with manually downloading the image using ajax.

Here is an example of the code I am working on:

const load = async () => {
  loaded.value = false

  try {
    const res = await axios.get(src.value, {
      headers: { 'X-Chat-Session': sessid }
    })

    console.log(res.data) // "����\u0002IExif\u0000\u0000MM\u0000*\u0000\u0000\u0000\u0008\u0000\u0007\u0001\u0000\u0000\u0003\u0000\u0000\u0000... 

    loaded.value = true
    emit('loaded')
  } catch (e) {
    emit('loadingError', e)
  }
}

My goal is to

<my image container>.appendChild(new Image(res.data))

Alternatively, it would be ideal if I could insert the binary response into the src attribute of an existing <img> element.

Important notes:

I do not have control over the server side
I cannot use service workers
Base64 operations are not recommended

That's all. I appreciate your help!

javascript html ajax image

Answer 1

Answer №1

Give this a shot:

const fetchImageData = async () => {
  imageDataLoaded.value = false

  try {
    const response = await axios.get(imageSourceUrl.value, {
      responseType: 'blob', 
      headers: { 'X-Chat-Session': sessionId }
    })

    console.log(response.data)
    const imageUrl = URL.createObjectURL(response.data)
    <image element>.src = imageUrl;

    imageDataLoaded.value = true
    emit('imageDataLoaded')
  } catch (error) {
    emit('imageLoadingError', error)
  }
}

Answer 2

Give this a shot:

const fetchImageData = async () => {
  imageDataLoaded.value = false

  try {
    const response = await axios.get(imageSourceUrl.value, {
      responseType: 'blob', 
      headers: { 'X-Chat-Session': sessionId }
    })

    console.log(response.data)
    const imageUrl = URL.createObjectURL(response.data)
    <image element>.src = imageUrl;

    imageDataLoaded.value = true
    emit('imageDataLoaded')
  } catch (error) {
    emit('imageLoadingError', error)
  }
}

Transform the binary image data sent by the server into an <img> element without using base64 encoding

Answer №1

Similar questions

Which JavaScript framework tackles the challenges of managing asynchronous flow, callbacks, and closures?

Determining the minimum and maximum values of a grid using props in a React component

The Alert Component fails to display when the same Error is triggered for the second time

Flowing Waterways and Transmission Control Protocol

I am looking to utilize React and Next.js to map my array from an object. The component is a function employing hooks

What could be causing my for loop to become unresponsive?

JQuery method for extracting a specific span's content from a div

Step-by-step guide on resolving AngularJS Issue: [$injector:modulerr]

Error encountered when importing a Material-UI component: Unable to load a module from @babel/runtime

In Visual Studio Code, beautification feature splits HTML attributes onto separate lines, improving readability and code organization. Unfortunately, the print width setting does not apply

What is the best way to incorporate several php files into a WordPress post?

What is the best way to display a list of items in Vue JS while maintaining the

Bring in styles from the API within Angular

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

Disallow/bound the position of the marker on Google Maps

creating a form layout with inline buttons

Modifying image size by adjusting width before sending it through a header in php

Applying a dynamic translate3d transformation on the ::after element using CSS3

The jQuery upload feature fails to function properly when attempting to upload multiple images simultaneously on a single webpage

Enhance the efficiency of time tracking function