[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;
required: true;
};
loadAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
default: () => import("vue").DefineComponent<{}, {}, any>;
};
hoverAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
};
showNextImageOnHover: {
type: BooleanConstructor;
default: boolean;
};
}>, {
pendingImages: Ref;
loadedImages: Ref;
isHovering: Ref;
userHasHoveredImage: Ref;
loaderStyles: import("vue").CSSProperties;
animation: import("vue").ComputedRef>;
imageSrc: import("vue").ComputedRef;
shouldLoadNextImage: import("vue").ComputedRef;
flagImageAsFailed: () => void;
flagImageLoaded: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly;
required: true;
};
loadAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
default: () => import("vue").DefineComponent<{}, {}, any>;
};
hoverAnimation: {
type: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
};
showNextImageOnHover: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{}>, {
loadAnimation: string | Function | Record;
showNextImageOnHover: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
```