Styjun

How to cut a climbing rope?

Why isn't 'chemically-strengthened glass' made with potassium carbonate to begin with?

How to patch glass cuts in a bicycle tire?

Count Even Digits In Number

How to politely tell someone they did not hit "reply to all" in an email?

Why didn't Thanos use the Time Stone to stop the Avengers' plan?

Should one buy new hardware after a system compromise?

Can the Grave cleric's Sentinel at Death's Door feature turn a critical hit into a miss, while adamantine armor does not?

Why did the person in charge of a principality not just declare themself king?

Can I tell a prospective employee that everyone in the team is leaving?

What was the idiom for something that we take without a doubt?

How did NASA Langley end up with the first 737?

First Match - awk

Best material to absorb as much light as possible

Of strange atmospheres - the survivable but unbreathable

How to let other coworkers know that I don't share my coworker's political views?

Construct a word ladder

Remove CiviCRM and Drupal links / banner on profile form

Are black holes spherical during merger?

Is it legal to meet with potential future employers in the UK, whilst visiting from the USA

Who is in charge of Wakanda?

A steel cutting sword?

Need to read my home electrical meter

What could a self-sustaining lunar colony slowly lose that would ultimately prove fatal?

Angular 7 - Display Images from byte in Database

Angular 2 - render byte[] from Web Api as an image srcUncaught SyntaxError: Unexpected token U in JSON at position 0 at JSON.parse (<anonymous>) at Response.Body.jsonStrange out of memory issue while loading an image to a Bitmap objectWhen to use IMG vs. CSS background-image?Lazy load of images in ListViewHow do I auto-resize an image to fit a 'div' container?How to vertically align an image inside a div?Changing image size in MarkdownI am using a div to display a banner image, using the CSS background-image property, its not working in IE11 and Firefox 27.01PHP- Store multiple images or display in different sizes?Angular HTML bindingAngular - Property Binding for height & width not working for Image

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I am having around 400 images all stored in database and getting those in C# code in byte[].

My requirement is very simple. I have Design class which contains Name, Code and byte[]. I am binding this class using ngFor

<div *ngFor="let design of designs" >
<img height="200" width="200" src="design.data" />

<div>
 <h2> design.name </h2>
 <h4> design.code </h4>
</div>

I tried this link but it is not working for me. I used both directive and other method. Looks like few things got changed from 2 to 7.

The second answer in the above link without using directive gave me another error. Error is this

Finally, after spending more than a half day, I am unable to display image in UI. I am developing using Angular 7. What would be the best way to display images?

angular image

share|improve this question

edited Mar 24 at 9:01

Flyii

5801114

asked Mar 24 at 2:17

ChatraChatra

47411241

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The 2nd answer from the link should work. If you get unexpected token with your json, you should check if your json is valid (you can do that here: jsonlint.com) if it is not valid, why? In general i think using base64 for images is a bad idea and the best way would be to provide an api endpoint where the browser can download that image as binary so that you can just use the link to the image in the img src. That would be more complicated to implement though
  
  – x4rf41
  Mar 24 at 3:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You're not understanding how HTML and HTTP work. The src property of an image doesn't contain the bytes of the image. It contains the URL of the image. When the browser finds an <img src="/foo/bar"> in the HTML, it sends an additional GET request to /foo/bar, and the server is then supposed to send a response with the bytes of the image as the body, and the content type of the image in a header.
  
  – JB Nizet
  Mar 24 at 9:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @x4rf41 I would like to implement without using base64, can you please guide me on how to implement in better way even if it is complicated?
  
  – Chatra
  Mar 24 at 12:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @x4rf41 the return string after I converted the data from bytes to base64 is very big and jsonlint.com is saying it is invalid.
  
  – Chatra
  Mar 24 at 12:49
  

  
  
  
  

add a comment | 

0

I am having around 400 images all stored in database and getting those in C# code in byte[].

My requirement is very simple. I have Design class which contains Name, Code and byte[]. I am binding this class using ngFor

<div *ngFor="let design of designs" >
<img height="200" width="200" src="design.data" />

<div>
 <h2> design.name </h2>
 <h4> design.code </h4>
</div>

I tried this link but it is not working for me. I used both directive and other method. Looks like few things got changed from 2 to 7.

The second answer in the above link without using directive gave me another error. Error is this

Finally, after spending more than a half day, I am unable to display image in UI. I am developing using Angular 7. What would be the best way to display images?

angular image

share|improve this question

edited Mar 24 at 9:01

Flyii

5801114

asked Mar 24 at 2:17

ChatraChatra

47411241

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The 2nd answer from the link should work. If you get unexpected token with your json, you should check if your json is valid (you can do that here: jsonlint.com) if it is not valid, why? In general i think using base64 for images is a bad idea and the best way would be to provide an api endpoint where the browser can download that image as binary so that you can just use the link to the image in the img src. That would be more complicated to implement though
  
  – x4rf41
  Mar 24 at 3:00
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You're not understanding how HTML and HTTP work. The src property of an image doesn't contain the bytes of the image. It contains the URL of the image. When the browser finds an <img src="/foo/bar"> in the HTML, it sends an additional GET request to /foo/bar, and the server is then supposed to send a response with the bytes of the image as the body, and the content type of the image in a header.
  
  – JB Nizet
  Mar 24 at 9:17
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @x4rf41 I would like to implement without using base64, can you please guide me on how to implement in better way even if it is complicated?
  
  – Chatra
  Mar 24 at 12:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @x4rf41 the return string after I converted the data from bytes to base64 is very big and jsonlint.com is saying it is invalid.
  
  – Chatra
  Mar 24 at 12:49
  

  
  
  
  

add a comment | 

I am having around 400 images all stored in database and getting those in C# code in byte[].

My requirement is very simple. I have Design class which contains Name, Code and byte[]. I am binding this class using ngFor

<div *ngFor="let design of designs" >
<img height="200" width="200" src="design.data" />

<div>
 <h2> design.name </h2>
 <h4> design.code </h4>
</div>

I tried this link but it is not working for me. I used both directive and other method. Looks like few things got changed from 2 to 7.

The second answer in the above link without using directive gave me another error. Error is this

Finally, after spending more than a half day, I am unable to display image in UI. I am developing using Angular 7. What would be the best way to display images?

angular image

share|improve this question

edited Mar 24 at 9:01

Flyii

5801114

asked Mar 24 at 2:17

ChatraChatra

47411241

<div *ngFor="let design of designs" >
<img height="200" width="200" src="design.data" />

<div>
 <h2> design.name </h2>
 <h4> design.code </h4>
</div>

angular image

angular image

share|improve this question

edited Mar 24 at 9:01

Flyii

5801114

asked Mar 24 at 2:17

ChatraChatra

47411241

share|improve this question

edited Mar 24 at 9:01

Flyii

5801114

asked Mar 24 at 2:17

ChatraChatra

47411241

edited Mar 24 at 9:01

Flyii

5801114

edited Mar 24 at 9:01

Flyii

5801114

asked Mar 24 at 2:17

ChatraChatra

47411241

asked Mar 24 at 2:17

ChatraChatra

47411241

1 Answer
1

active

oldest

votes

0

You're going to need to base64 encode the image bytes you are receiving from the database and then display the image using the base64 bytes.

So you can do something along the lines of the following:

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

Where arrayBuffer is a buffer of the bytes, once you have gotten your base64 string you can set it to a public variable. Bear in mind that you need to append the header to the base64 string. So you if your public variable is called image then you will have to do the following:

this.image = 'data:image/jpeg;base64,' + base64String

Once you have done that you can display the iamge using the following tag:

<img id="image" [src]="image" >

share|improve this answer

answered Mar 24 at 9:19

TachyonTachyon

894516

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55320171%2fangular-7-display-images-from-byte-in-database%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You're going to need to base64 encode the image bytes you are receiving from the database and then display the image using the base64 bytes.

So you can do something along the lines of the following:

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

Where arrayBuffer is a buffer of the bytes, once you have gotten your base64 string you can set it to a public variable. Bear in mind that you need to append the header to the base64 string. So you if your public variable is called image then you will have to do the following:

this.image = 'data:image/jpeg;base64,' + base64String

Once you have done that you can display the iamge using the following tag:

<img id="image" [src]="image" >

share|improve this answer

answered Mar 24 at 9:19

TachyonTachyon

894516

add a comment | 

0

You're going to need to base64 encode the image bytes you are receiving from the database and then display the image using the base64 bytes.

So you can do something along the lines of the following:

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

Where arrayBuffer is a buffer of the bytes, once you have gotten your base64 string you can set it to a public variable. Bear in mind that you need to append the header to the base64 string. So you if your public variable is called image then you will have to do the following:

this.image = 'data:image/jpeg;base64,' + base64String

Once you have done that you can display the iamge using the following tag:

<img id="image" [src]="image" >

share|improve this answer

answered Mar 24 at 9:19

TachyonTachyon

894516

add a comment | 

You're going to need to base64 encode the image bytes you are receiving from the database and then display the image using the base64 bytes.

So you can do something along the lines of the following:

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

Where arrayBuffer is a buffer of the bytes, once you have gotten your base64 string you can set it to a public variable. Bear in mind that you need to append the header to the base64 string. So you if your public variable is called image then you will have to do the following:

this.image = 'data:image/jpeg;base64,' + base64String

Once you have done that you can display the iamge using the following tag:

<img id="image" [src]="image" >

share|improve this answer

answered Mar 24 at 9:19

TachyonTachyon

894516

var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

this.image = 'data:image/jpeg;base64,' + base64String

<img id="image" [src]="image" >

share|improve this answer

answered Mar 24 at 9:19

TachyonTachyon

894516

answered Mar 24 at 9:19

TachyonTachyon

894516

answered Mar 24 at 9:19

TachyonTachyon

894516