The contents of the image are currently unable to be viewed

I have a Blob of an image that I am trying to display in the browser. However, when I use the code below to open the image, it shows some Mandarin scripts on the window.

Here is the code snippet:

var url="http://....link..../downloadFile?fdsFileId="+fileId;
    $http({
        method: 'GET',
        url: url,
        responseType: 'arraybuffer'
    }).success(function (data, status, headers) {
        headers = headers();
        var contentType = headers['content-type'];
        var blob = new Blob([data], { type: contentType });
        var fileURL = window.URL.createObjectURL(blob);
        console.log("url:"+fileURL);
        console.log("content type:"+contentType);
        window.open(fileURL);
        window.URL.revokeObjectURL(fileURL);

After executing the code, the image displayed in the browser is as follows: The fileURL containing the image is provided for viewing.

Answer №1

To display png images, use content-type : 'image/png', and do the same for other file types accordingly. For all file support, use content-type : ''. I hope this information is helpful.

Edit1: Using content-type : '' did not resolve the issue in Chrome. Therefore, I resorted to extracting the file extensions from the filenames and setting the content-type using if-else conditions.

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

Is there a way to search through an array of object arrays in JavaScript for a specific key/value pair using lodash or any other function?

I am faced with a task involving an array of objects. Each object has a key that needs to be used to search through sets of arrays containing similar objects. The goal is to determine if all the arrays contain the same value for a specific key in my object ...

Encountering a Project Oxford error - HTTP 404 while trying to access Computer Vision API with Javascript

I am attempting to retrieve JSON data from Microsoft Project Oxford via an API call. Despite following the API reference, I encounter a 404 error when making the call. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">< ...

Updating a MongoDB subarray with $set now includes adding a new entry rather than just updating existing ones

When trying to update an object in a sub-array, instead of replacing and updating the data, it adds a new entry. Here is the code from controller.js: const updateSubCategory = asyncHandler(async (req, res) => { const { dataArray } = req.body ...

What is the best approach to execute the jquery script exclusively on mobile devices?

I want to modify this code so that it only functions on mobile devices and is disabled on computers. How can I achieve this? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="pri ...

Implementing script loading within the Angular scope

I'm attempting to load a custom script from the database based on client-side logic. I am having trouble figuring out how to make it function properly. Here is my controller code: 'use strict'; angular.module('youshareApp') . ...

How can the title of a link be hidden in a popup panel?

Seeking assistance for a popup panel issue. When you click on the black ffff button, a popup panel appears with the text ffff having a blue shadow in the top left corner that disappears when clicked. How can I remove this? Here's the link: <a class ...

Show JSON array items

My php file (history.php) generates a JSON object $i=1; $q=mysql_query("select * from participants where phone='".mysql_real_escape_string($_GET['phone'])."' limit 10"); while($rs=mysql_fetch_array($q)){ $response[$i] = $rs[&ap ...

AngularJS Dilemma: Virtual Machine Data Set but No Rendering in Sight

Below is the AngularJS controller code written in Typescript: /// <reference path='../../definitions.d.ts' /> module baseApp.viewControls.products { export interface IProductsScope extends IAppScope { vm: { product ...

Issues arise when attempting to use two HTTP get requests in a single AngularJS controller

Having two http GET requests in one controller, causing intermittent issues where only one of the GET requests works or sometimes none of them are shown. Any suggestions? }).controller("nextSidorAdminCtrl", function($scope,$rootScope,$http,$location,$s ...

Solving Promises with Arrays in JavaScript

Currently, I am working on a project and facing an issue that I need help with. Let me give you some background on what I am trying to achieve. First, I am making concurrent API calls using Axios in the following manner: const [...result] = await Promise. ...

Other browsers, such as Chrome and Firefox, are visible, except for Safari

https://testing007.s3-api.us-geo.objectstorage.softlayer.net/1A23CDC6F75811E6BFD706E21CB7534C---prof__6.jpg This link displays correctly on browsers like Chrome and Firefox, but does not show up on Safari. ...

Using ui-sref to transmit data attributes

Is there a way to pass extra data into the controller from within ui-sref? Currently, I am iterating through a JSON object and including data in the sref: <a data-imgName="{{ img.name }}" data-imgDesc="{{ img.desc }}" ui-sref="main.imgDesc({imgid: &apos ...

"Struggling with a basic Javascript function to refresh parts of a web page by calling a .php

After spending several hours browsing the internet, I am still struggling to get this straightforward example to function properly. Could someone please lend me a hand? My goal is to use JavaScript to display the contents of a PHP file. The display should ...

How to eliminate subdomains from a string using TypeScript

I am working with a string in TypeScript that follows the format subdomain.domain.com. My goal is to extract just the domain part of the string. For example, subdomain.domain.com should become domain.com. It's important to note that the 'subdoma ...

Positioning oversized images in a React Native application

Looking to showcase two images side by side using React Native, where I can customize the screen percentage each image takes up. The combined size of the images will exceed the horizontal screen space available, so I want them to maintain their original di ...

Child node in Firebase successfully deleted

Is there a method to determine if a subchild has been removed from the database structure below: users:{ a: { friends: { b:Jhon, c:Ted }, b: { friends: { a: Tom } }, c: { friends:{ a: Tom } } } I a ...

Ways to adjust the text size in jqGrid?

The current theme is ui-lightness. How can I adjust the font size within the grid? Your suggestions are appreciated. Many thanks. ...

Is it considered safe to modify variables by using this[varName] = something within a function that includes varName as a parameter?

As I continue working on this function, a question arises regarding the safety of changing variables in this manner. In my Angular service, I utilize utility functions where context represents this from the component calling the function. The code snippet ...

Having trouble with nodeJS when running the command "npm install"?

Can anyone help me understand why I'm encountering issues when running "npm install"? Whenever I run npm install, I am bombarded with numerous errors. npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\\Program Files\\nodejs&bsol ...

Troubleshooting Vue.js data binding problems

Utilizing HTML targeting with data binding <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div class="row" v-for="test in tests"> <div class="col-12"> <router-link tag="a" :to="{ name: ...