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.