0

I store images and data in database and i have .net Core API that sends back object which contains some data and array of images. How to show that image on page in angular? I tried using FileReader and its function readAsDataURL but i cant make it work and/or just can't convert images to blob.

Object model that is sent back from API:

    public class ControlPoint
{
    public int Id { get; set; }
    public string Location { get; set; }
    public string Confirmation { get; set; }
    public ICollection<Image> Images { get; set; }
    public ControlPointType Type { get; set; }
}

Image model:

public class Image
{
    public int Id { get; set; }
    public Guid ROWGUID { get; set; }
    public string FileName { get; set; }
    public DateTime DateAdded { get; set; }
    public int ControlPointId { get; set; }
    public byte[] Stream { get; set; }
}

Angular control point model:

export interface ControlPoint {
    id: number;
    location: string;
    confirmation: string;
    images: Photo[];
    type: ControlPointType;
}

Angular Image model:

export class Photo {
    fileName: string;
    dateAdded: Date;
    controlPointId: number;
    stream: any;
}

How should i handle this? I think i can't change response type to blob because i get whole object in json, not just images.

kkamil4sz
  • 431
  • 1
  • 5
  • 19

0 Answers0