If you invoke revokeObjectURL, Chrome will fail to display Blob images

-----update------

After some investigation, I found that commenting out 

window.URL.revokeObjectURL( imgSrc );
fixed the issue in all browsers. It seems like Chrome was revoking the URL too early. I am curious to understand why this behavior occurs, and if there are any potential drawbacks to how I am currently handling the URL revocation process. Now, I revoke the previous URL as a new one is loaded using 
if (imgSrc) {window.URL.revokeObjectURL( imgSrc );}
(imgSrc is now a global variable).

I have a website that uses AJAX to communicate with a CGI script, which generates image/jpeg data. The blob response is then set as the source of an image on the webpage using the createObjectURL function. This functionality works smoothly in all browsers except for Chrome.

In other browsers, the image loads successfully, but in Chrome, I encounter the error message: 

Failed to load resource: the server responded with a status of 404 (Not Found)
, followed by a URL starting with blob:.

I attempted to use webkitURL as an alternative, but it resulted in the same error message along with webkitURL is deprecated.

Here is the code snippet from my AJAX call:

var filepath = "/babelia.cgi";
xmlhttp=new XMLHttpRequest();

xmlhttp.onload = function(oEvent) {
if (imgSrc) {window.URL.revokeObjectURL( imgSrc );}
        var blob = xmlhttp.response;
        if (endless) {
        imgSrc = (window.URL ? URL : webkitURL).createObjectURL( blob );
        document.getElementById("palette").src = imgSrc;
        // window.URL.revokeObjectURL( imgSrc );
        babel();
        }
    }
xmlhttp.open("POST",filepath,true);
xmlhttp.responseType = "blob";
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var info = "location=" + postdata;
if (!landscape) {info += "&flip=portrait";}
xmlhttp.send(info);

You can view the website here:

javascriptajaximagecgiblob

Answer №1

Understanding blobs can be a bit tricky, but here are some insights I've gained.

  1. To abstract away browser differences when working with blobs, I recommend using https://example.com/BlobHandler.js.
  2. If you're debugging in Chrome, check out chrome://blob-insights/ for a closer look at details. In the latest version (56.0.3029.110), it displays URLs and their associated data or references to local files.
  3. When you revoke a URL, you inform the browser that the data is no longer needed. This can help free up memory, but be cautious if there are still references pointing to that URL, such as an image tag.

On a side note: Your question prompted me to solve my own issue where I was encountering 404 errors in Chrome after revoking a URL because I had a reference to it on an image tag.

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

Dynamically populating checkboxes and dynamically setting their checked state

I'm working with a for loop that dynamically generates 7 checkboxes in a row. Here's how it looks: @for (int i = 1; k < order.Rows.length; i++) { Row: @i <ul> @for (int j = 1; j < order.NumCheckboxes.length; j++) ...

javascriptc#jqueryasp.net-mvc

Reduce the use of if statements

Is there a way to optimize this function by reducing the number of if statements? The currentFeatures are determined by a slider in another file. The cost is updated if the currentFeatures do not match the previousFeatures, and if the user changes it back ...

javascriptreactjstypescript

Update: "Mui V5 - Eliminate collapse/expand icons in TreeView and reduce TreeItem indentation"

My current project involves Mui V5 and I am looking to customize the TreeView component. Specifically, I need to remove the collapse/expand icons as I want them to be integrated into the TreeItem label component on the left side instead of the right. Add ...

javascriptcssreactjsmaterial-uitreeview

How does the Cluster module in Node.js compare to the Cluster module in Learnboost?

Node.js features its own Cluster core module (source: http://nodejs.org/docs/v0.8.3/api/cluster.html) while Learnboost has introduced a similarly named Cluster module as well (source: , https://github.com/LearnBoost/cluster). What are the differences betw ...

javascriptnode.jscluster-computingnpm

The surprising twist of hasOwnProperty's behavior

I am currently working on a function that is designed to check whether an object contains keys such as 'id' or 'serif:id'. However, I have encountered some issues with its functionality. function returnIdPreferSerifId(object) { if ...

javascriptnode.jsjsonif-statementhasownproperty

Troubleshooting Problems Arising from PHP, Ajax, and SQL Integration

I've been encountering an issue that seems simple, but I haven't been able to find a solution specific to my problem in the forums. The problem arises when I try to display a table of hyperlinks, each linked to an AJAX method with an 'oncli ...

phpjavascriptsqlajax

Managing multiple properties linked to a main component array in VueJS

I am facing a challenge with a list of components that I would like to make editable and replicate the state to the parent component. The list component is defined as: Vue.component("shortcuts", { props: { shortcuts: Array }, template: '... ...

javascriptvue.js

Place JavaScript buttons within a form element without triggering form submission upon clicking the buttons

Struggling to find the right words, but I'll give it a shot. I have a PHP form with multiple fields, including a textarea where I store some PHP values. I wanted to enhance the appearance of the PHP values by adding a beautifier with CSS styling. Ever ...

javascriptphphtmlbutton

Having trouble configuring AJAX and PHP to work together

Here's the situation I'm dealing with: I have HTML, JS, and PHP files. In the PHP file, there is an associative array containing default values to populate form elements in the HTML file. I'm trying to use AJAX to retrieve data from the PHP ...

javascriptphpjqueryhtmlajax

Interactive dropdown menu populates form fields with database information using AJAX technology

Currently, I have two files named html.php and getuser.php. Within html.php, there is a dynamic dropdown menu that is populated with ids retrieved from a mysql database. On the other hand, getuser.php contains code designed to fetch the company name assoc ...

phpmysqlajax

Tips for turning off the auto save password option on browsers for user registration forms

Is there a way to prevent browsers from saving passwords on the add users form? I've tried using autocomplete="off" but it doesn't seem to work for saved passwords. I've searched extensively for a solution but haven't found the right on ...

javascriptjqueryhtml

State update failing to modify arrays

Shown below is an array that contains boolean values: const [state, setState] = React.useState({ [`${"checkedA"+index}`]: false, [`${"checkedB"+index}`]: false, [`${"checkedC"+index}`]: false, [`${"checkedD"+index}`]: false, }); ...

javascriptreactjsmaterial-ui

What is the best way to manage multiple form submissions on a single page using Ajax and PHP?

I am currently working on creating an admin panel with two forms on the same page, both being handled using Ajax and PHP. Although I have written the necessary code, I am facing an issue where the data is not getting saved in the database. Data_entry.php ...

phpjqueryajaxforms

Select dropdown options in Material UI are overlapping

Exploring React for the first time and utilizing material-ui's select button feature. It displays highlighted text based on user input, but ideally this highlight should disappear upon selection of an element. https://i.stack.imgur.com/2ccaS.png How ...

javascriptreactjsreact-routermaterial-uiformsy-material-ui

Output the word 'Days', 'Months', or 'Years' depending on the value of N, which represents the number of days

I am currently utilizing moment.js in conjunction with vue 3. I've implemented a function that calculates the disparity between two dates. The functionality works as expected, but here's where my query comes in. The function is structured like so ...

javascriptvue.jsmomentjs

Having trouble with Node.js GET request functionality not functioning properly

I've been encountering difficulties with loading a page using Node.js. While my Node.js Application code functions properly when attempting to load other resources such as www.google.com, it seems to encounter issues specific to the domain name www.eg ...

javascriptnode.jshttpcurlhttprequest

After the checkbox is clicked, I must send a boolean value to the function through the input flag in AngularJS

<input class="bx--toggle" id="toggle-view" type="checkbox" ng-model="vm.monthView" ng-change="vm.getRelevantData()" ng-attr-data-modal-target="{{vm.alertForSaveAll ? '#add-save-all-alert-modal': 'undefined'}}"> Within this p ...

javascripthtmlangularjs

Is there a way to verify if a FormData file has no content?

Currently working on an AJAX form where users can choose a background color or upload a background image. The aim is to have the bgColor field ignored if a file is specified for bgImg. <label>Color: <input type="color" name="bgColor" value="#0000 ...

javascriptajaxforms

ng-repeat not functioning properly with FileReader

Here is a look at how my view appears: <body ng-controller="AdminCtrl"> <img ng-repeat="pic in pics" ng-src="{{pic}}" /> <form ng-submit="postPic()"> <input id="photos" type="file" accept="image/*" multiple/> <button> ...

javascriptangularjsfilereader

Utilizing React Recharts to create personalized tooltips

In my current project, I am looking to create a custom tooltip to replace the default one in recharts. The default tooltip that I want to change is shown below: https://i.stack.imgur.com/TjTiL.png I would like the new custom tooltip to look like this: ...

javascriptreactjsmaterial-uirecharts