In TypeScript, What is the type of Image?

Question

I'm declaring an interface which will contains image also. What type do i need to give to it.

export interface AdInterface {
    email: string;
    mobile: number;
    image?:   ??
}

How do you represent the image? Is it an URL to an image? Is it blob data? Is it a HTML `` element? — Phillip, Jan 22 '17 at 14:18

score 129 · Accepted Answer · answered Jan 27 '17 at 22:46

129

If your image property contains ...

Image used as <img> element

image?: HTMLImageElement

URL to image.

image?: String

Image as file from <input> element

image?: File

answered Jan 27 '17 at 22:46

Misaz

10

It's recommended to use "string" as type and not "String" for this usage. – Gabriel Petersson Jul 24 '20 at 22:36
If the image is a byte array, would you recommend using HTMLImageElement or File? – abhi Jan 13 '22 at 16:33
1

Type of byte array is `array`. If you need work with `HTMLImageElement` or `File` instead then you need to convert your byte array by conversion specific procedure depending on your needs. Conversions are usualy done by converting to base64 string. More details and examples are at https://stackoverflow.com/questions/20756042/how-to-display-an-image-stored-as-byte-array-in-html-javascript and https://stackoverflow.com/questions/35038884/download-file-from-bytes-in-javascript – Misaz Jan 14 '22 at 10:25

score 2 · Answer 2 · answered Jul 15 '22 at 11:57

Most image when imported into server-side TypeScript are strings.

For example trying to reference File or HTMLImageElement on an imported image you will get this error:

TS2322: Type 'string' is not assignable to type 'HTMLImageElement'.

I recommend just using string. If you are having an import error for PNG images in TypeScript then take a look here.

2 Answers2