What is the process of transforming an xhr request into an angular $http request?

I've been successfully loading images using ajax with the following code. However, when trying to convert it into Angular and use $http, it's not working as expected.

Original ajax code

var xhr = new XMLHttpRequest();
xhr.open('GET', attr.imageUrl, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
    element[0].src = window.URL.createObjectURL(this.response);
};

xhr.send();

Angular Code Attempt

$http.get(attr.imageUrl, {}, {
    responseType: 'arraybuffer'
})
.success(function(response) {
    var file = new Blob([response]);
    element[0].src = URL.createObjectURL(file);
});
javascriptangularjsajax

Answer №1

In my opinion, the code should look like this:

$http.fetch({ url: attr.imageLink, type: 'arraybuffer'})
.done(function(responseData) {
    var imgFile = new Blob([responseData]);
    element[0].src = URL.createObjectURL(imgFile);
});

Alternatively, you could also use:

$http.fetch(attr.imageLink, {type: 'arraybuffer'})
.done(function(data) {
    var imageBlob = new Blob([data]);
    element[0].src = URL.createObjectURL(imageBlob);
});

Answer №2

Give this a shot:

  $http.get(attr.pictureUrl, {responseType: 'blob'})
  .then(function(response) {
    var image = new Blob([response]);
    element[0].src = URL.createObjectURL(image);
  });

Answer №3

Give this a shot:

$http.get(attr.imageUrl, {responseType: 'arraybuffer'})
  .then(function(response) {
    var data = new Blob([response.data], {
                    type: 'application/octet-binary'
                });
    element[0].src = URL.createObjectURL(data);
  });

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

Building Firestore subcollections with the latest WebSDK 9: A step-by-step guide

I'm looking to create a subcollection within my document using the webSDK 9, specifically the tree-shakable SDK. While I have come across some solutions, they all seem to be outdated and reliant on the old sdk. Just for context, I am working with Ne ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Utilize JQuery to inject both standard HTML elements and safely rendered escaped HTML onto a webpage

After storing some data in firebase that can be retrieved on the client side, I use JQuery to add it to the HTML. Although the process of prepending the data to the DOM element is straightforward, there is a security concern as raw code can make the applic ...

javascriptjqueryhtmlhtml-escape-characters

Transition effortlessly between web pages with subtle fading effects

I want to implement smooth page transition effects between two web domains: mcpixel.co.uk/new and mcpaper.co.uk. I am the owner of both domains. When a link in the header is clicked, I'd like the page to fade transition to the new page without any whi ...

javascriptphpjqueryhtmlcss

Reload the text content of a locally hosted webpage within an iframe at regular intervals

I have set up a simple webpage on my local machine to showcase the contents of some text files on a dedicated monitor. However, I am facing an issue where refreshing the entire webpage causes flickering. My goal is to only refresh the iframes and reload t ...

javascripthtmliframerefresh

"The error message "Node JS, MYSQL connection.query is not a valid method" indicates

db_config.js: const mysql = require('mysql'); var connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '', database: 'test' }) connection.connect(function(err) ...

javascriptmysqlnode.js

What could be preventing this AJAX call from running correctly?

I am in the process of developing a website that provides users with a discount based on a promotional code they can input. It is important for me to verify the validity of the code in our database before allowing a new sign-up to proceed. Below is the AJA ...

javascriptphpajaxpost

What is the best way to ensure elements are rendered in Vue only when they are fully prepared?

Is there a way to delay the rendering of images in my list until all content is ready? I want everything, including text and classes, to finish loading before displaying anything. Even with v-cloak, it's not working! I'm having difficulty with t ...

javascriptvue.jsvuejs2

Gingerbread mechanism spilling the beans on handling ajax requests

Currently, I am in the process of developing a PhoneGap application that must be compatible with Android Gingerbread. Unfortunately, it seems that devices running on Gingerbread encounter issues when trying to make AJAX requests to our service API. Strange ...

androidjqueryajaxcordovaandroid-2.3-gingerbread

Is there a way to remove a particular map from Firestore?

In my Google Firebase setup, I have uniquely named each Map to serve as the index for every document. Using Vuejs (Javascript), I have structured it as follows: eQFelbD432T (Collection Name- user.uid) SKILLS (Document Name) ProjectManangement (Map Na ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Error message occurs when creating a pie chart with invalid values for the <path> element in Plottable/D3.js

For those who need the code snippets, you can find them for download here: index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <!-- CSS placement for legend and fold change --> </head> <body ...

javascriptjqueryhtmld3.jsplottable

Preparing user context prior to executing controllers within AngularJS

I recently created an AngularJS application and integrated a REST API to fetch resources for the app. As part of the authentication process, I store the user's access token in a cookie. When the user reloads the page, I need to retrieve user informati ...

javascriptangularjsajaxpromiserestangular

Tips for implementing jQuery on HTML loaded post document.ready():

I've encountered a scenario where I have multiple HTML elements being rendered by a JavaScript function on the page: <a href="#" class="test1">Test</a> <a href="#" class="test2">Test</a> <a href="#" class="test3">Test< ...

javascriptjquery

Upon calling the createModalAddPost() function, a single window is triggered to open

Hey there, I'm having a JavaScript question. So, I have a panel that opens a window, and it works fine. But the issue arises when I close the window and try to open it again - it doesn't work. I have to reload the page every time in order to open ...

javascripthtmlcss

Need to transfer a variable from the left side to the right side within Javascript. The instructor demonstrated using up and down as an

Recently started learning JavaScript as part of my college game programming course. I am only using Notepad for coding. Currently, I am trying to move an object (in this case, just the letter "o") from left to right on the screen. My professor has provided ...

javascripthtml

Monitor modifications to an <input type="text"> element as its value is updated dynamically through JQuery from the server side

I am struggling with detecting when the value of an input field changes after it has been set by clicking a button. I have tried various events but can't seem to find the right one. <!DOCTYPE html> <html> <head> <script src=" ...

javascriptjquery

What could be the reason why this LESS CSS is not taking effect?

Why won't this stylesheet load properly? The desired background color is supposed to be similar to cadetblue. You can view my page with the linked home.less.css at: ...

javascripthtmlcssless

Invoke JavaScript when the close button 'X' on the JQuery popup is clicked

I am implementing a Jquery pop up in my code: <script type="text/javascript"> function showAccessDialog() { var modal_dialog = $("#modal_dialog"); modal_dialog.dialog ( { title: "Access Lev ...

javascriptjqueryhtmlasp.net

What are the steps to execute a file on localhost using an HTML page?

Currently, I have an HTML file that leverages the Google Calendar API javascript to read the next event on my calendar. The functionality works flawlessly when manually inserting a specific URL in a browser address window, which triggers a GET request in a ...

javascriptpythonhtmllocalhost

AJAX retrieving data with a GET request

Looking to customize my page www.domain.com/page.php?x=1&y=2&z=3 Is there a way to assign values to the $_GET variables in an AJAX request using $.get()? $.get('page.php', {x: x, y: y, z: z}, function(){ }) How can I set the $_GET par ...

phpjqueryajax

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is ...

javascripthtmlcss