[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultImage](./x-components.baseresultimage.md)
## BaseResultImage variable
Component to be reused that renders an `![]()
`.
**Signature:**
```typescript
_default: import("vue").DefineComponent<{
result: {
type: PropType;
required: true;
};
loadAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
default: () => import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>;
};
hoverAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
};
showNextImageOnHover: {
type: BooleanConstructor;
default: boolean;
};
}, {
pendingImages: Ref;
loadedImages: Ref;
isHovering: Ref;
userHasHoveredImage: Ref;
loaderStyles: Partial;
animation: import("vue").ComputedRef>;
imageSrc: import("vue").ComputedRef;
shouldLoadNextImage: import("vue").ComputedRef;
flagImageAsFailed: () => void;
flagImageLoaded: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly;
required: true;
};
loadAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
default: () => import("vue").DefineComponent<{}, {}, any, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly>, {}, {}>;
};
hoverAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
};
showNextImageOnHover: {
type: BooleanConstructor;
default: boolean;
};
}>>, {
loadAnimation: string | Function | Record;
showNextImageOnHover: boolean;
}, {}>
```