Receiving a PNG image in the response of a REST call from ServiceNow, the data appears to be garbled with junk characters

I encountered an interesting situation where I received a PNG image as a response from a REST call in ServiceNow. The response seems to be filled with junk characters, making it difficult to work with as shown below. My goal is to write a server script that can take this response, convert it into a string, and then return it to the client UI action script to render the image back on the UI page. I have searched for similar cases but couldn't find any. If anyone has faced a similar situation before, please share your insights. Any help would be greatly appreciated.

REST Response:

    IHDRU  bKGD IDATx{\T o"r("r J(/LfSyˬcio xT
        S$=JOGE1 xA@ T  \g53kX}? >ʞg<ڿ /_V  Лhj A A rRoݻwS! %...
javascriptajaxservicenow

Answer №1

It seems like the old javascript is struggling to handle binary data that you are passing.

This method showcases the modern and correct way to display ajax images.

Make sure to verify compatibility before proceeding...

Visit this link for more information on URL.revokeObjectURL

Here is a function designed to show images using ajax in a more effective manner.
function showImg(e){
 var img=document.createElement('img');
 img.onload=function(e){
  document.body.appendChild(img);
  window.URL.revokeObjectURL(img.src);//Clear
 };
 img.src=window.URL.createObjectURL(this.response);
}

window.URL=window.URL||window.webkitURL;

var xhr=new XMLHttpRequest;
xhr.open('GET','/path/to/image.png',true);
xhr.responseType='blob';//Blob
xhr.onload=showImg;
xhr.send();

If needed, there is an alternative method involving new Uint8Array, but it may lead to some memory leaks.

Let me know if you would like me to share that code as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking the React Todo Delete Button instantly clears out all tasks on the list

I am dealing with 2 files: App.js import React, { Component } from 'react'; import './App.css'; import ToDo from './components/ToDo.js'; class App extends Component { constru ...

javascriptreactjs

Traversing through JSON main sections, checking for operation and subsequently retrieving data

I have a json structure below: { users: [ { action: 'add', payload: [Array] } ], categories: [ { action: 'add', payload: [Array] } ], products: [ { action: 'add', payload: [Array] } ] } Can you suggest a method using .m ...

javascriptnode.jsecmascript-6

The ng-click event for the reset button is limited to a single use

There seems to be a problem with the reset button functionality on my webpage. Although it initially works, it only works once and then requires a reload of the page to function again. Here is the JS code: var ctrl = this; var original_device = angular.c ...

javascriptangularjsbuttonreset

Creating a unique Nest.js custom decorator to extract parameters directly from the request object

I am working with a custom decorator called Param, where I have a console.log that runs once. How can I modify it to return a fresh value of id on each request similar to what is done in nestjs? @Get('/:id') async findUser ( @Param() id: stri ...

javascriptnode.jstypescriptnestjsreflect-metadata

Refresh the indicator upon data filtering via an ajax request

I'm encountering an issue where the location marker doesn't update when filtering. The old marker remains in place and new markers keep stacking on top of it. Even after using map.removeLayer(), the problem persists. If I use this function after ...

jqueryajaxleaflet

What is the relationship between Laravel and Ajax?

Can multiple Laravel views be loaded onto a single HTML element within a dynamic layout view? Are there any Ajax packages or similar tools that allow Laravel to load views without reloading the entire page? ...

phpajaxlaravel

Property '{}' is not defined in type - Angular version 9.1.1

Currently, I am working with Angular CLI version 9.1.1 and I am attempting to update certain data without updating all of it. form: UserInfo = {adresse : {}}; UserInfo.interface export interface UserInfo { id_user: string; username: string; em ...

javascriptangulartypescriptforms

Flickering of image in JavaScript when mouse is hovered over and removed

I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...

javascripthtml

Include a model attribute when making an AJAX POST request

I made an ajax POST call with JSON data and attempted to set a model attribute in the POST method, but unfortunately it doesn't seem to be working as expected. Here's the request in the controller: @RequestMapping(value="reubicar/idhu", method= ...

jqueryajaxspring-mvc

Add a component to another component in real-time

Check out my StackBlitz demo: DEMO I'm attempting to insert the 'table' component into the #test section of the app component when the visualization type is 'table'. To achieve this, I am using the createTable() function which gen ...

javascriptangulartypescriptangular6

The JavaScript audio is not working for the first three clicks, but starts playing smoothly from the fourth click onwards. What could be causing this issue?

$(".btn").click(function(event){ playSound(event.target.id); }); function playSound(name){ $("." + name).click(function() { new Audio("sounds/" + name + ".mp3").play(); ...

javascript

Creating multi-dimensional arrays using array lists with Axios and Vue.js

My knowledge of axios and JavaScript is limited, and I find myself struggling with creating a multi-dimensional array. 1. This is how I want my data to be structured : https://i.stack.imgur.com/kboNU.png userList: [ { ...

javascriptarraysvue.jsmultidimensional-arrayaxios

What could be causing the issue with the $http.delete method in AngularJS?

When trying to use $http.delete with Django, I encountered an HTTP 403 error. Here is my JS file: var myApp = angular.module('myApp',['ui.bootstrap']); myApp.run(function($http) { $http.defaults.headers.post['X-CSR ...

javascriptpythonangularjsdjango

Using Aframe and JavaScript to create split id animations

I am currently working on an Aframe WebVR app and trying to develop a function that splits this.id into two parts, assigns it to a variable, and then uses setAttribute. This is the code I have: AFRAME.registerComponent('remove-yellow', { init ...

javascripthtmlaframewebvr

Utilizing Ajax functionality with Bootstrap framework

While working on a CMS with Bootstrap theming, I encountered an issue with Ajax integration. My login module functions properly with Ajax, but including the Ajax libraries causes my dropdown menu to malfunction. <script src="https://ajax.googleapis.com ...

phpjqueryajaxtwitter-bootstrap

Error VM5601:2 encountered - Unexpected token "<" found in JSON at position 10

I am trying to retrieve data using Ajax and jQuery, but I keep encountering an error that I cannot figure out how to fix. VM5601:2 Uncaught SyntaxError: Unexpected token < in JSON at position 10 Below is the code I am working with. Model public f ...

javascriptjqueryjsonajax

Create a cylindrical HTML5 canvas and place a camera view inside the cylinder

I have a unique project in mind that involves creating an HTML5 canvas cylinder with the camera view at its center. The walls of the cylinder will display images, and the entire structure should be able to rotate and zoom. If anyone has any advice on how ...

javascriptjqueryhtmlcanvas

Encountering a problem when attempting to utilize AngularFire's Cloud Messaging Angular module due to missing configuration values for the app

Working with Firebase Cloud Messaging in my Angular application using AngularFire2 has presented a challenge. I am facing an error when attempting to retrieve the user's current token. I have already set up the "firebase-messaging-sw.js" and "manifes ...

javascriptangularfirebase-cloud-messagingangularfire

What is the best way to mimic an AJAX request using the Flask test client?

When testing Flask applications, the process involves: # main.py from flask import Flask, request app = flask.Flask(__name__) @app.route('/') def index(): s = 'Hello world!', 'AJAX Request: {0}'.format(request.is_xhr) ...

pythonajaxunit-testingflask

Presenting a dynamic selection of files from a database in a dropdown menu with looping functionality using Laravel

I have a dropdown menu that I want to use to display input files from the database based on the selection made. Here is the scenario: When a dropdown option is chosen, it should show input files derived from the "loop_atachment" table (based on the select ...

javascriptphpajaxlaravellaravel-5