1 min read



Component to be reused that renders an <img>.


Name Description Type Default
result (Required) The @empathyco/x-types#Result information. Result
loadAnimation Animation to use when switching between the placeholder, the loaded image, or the failed
image fallback.
animationProp () => NoElement
hoverAnimation Animation to use when switching between the loaded image and the hover image. animationProp
showNextImageOnHover Indicates if the next valid image should be displayed on hover. boolean false


Name Description Bindings
(name - type - description)
fallback Fallback image content. It will be rendered when all the images failed None
placeholder Loading image content. It will be rendered while the real image is not loaded None


Basic example

This component is for the result image. It may be part of the search result page, recommendations or other section which needs to include results.

The result prop is required. It will render a <img/> with the result image:

<BaseResultImage :result="result" />

Showing the next image on hover

If a result has multiple images, it can show the next one on hover.

<BaseResultImage :result="result" showNextImageOnHover />

Customizing slots content

Fallback and placeholder contents can be customized.

The fallback slot allows you to replace the content of the fallback image.

The other slot is called placeholder, and allows you to set the image that its going to be displayed while the real one is loaded.

<BaseResultImage :result="result">
  <template #placeholder>
    <img alt="Placeholder image" src="./placeholder-image.svg"/>
  <template #fallback>
    <img alt="Fallback image" src="./fallback-image.svg"/>

Customizing the animations

Two animations can be used this component.

The loadAnimation is used to transition between the placeholder, the fallback and the image.

The hoverAnimation is used to transition between the image and the hover image, if the showNextImageOnHover prop is true.

hoverAnimation will default to loadAnimation if it is not provided.

  import { BaseResultImage } from '@empathyco/x-components';
  import { CrossFade, CollapseHeight } from '@empathyco/x-components/animations';
  export default {
    name: 'BaseResultImageAnimations',
    components: {
    data() {
      return {
        loadAnimation: CrossFade,
        hoverAnimation: CollapseHeight,
        result: {
          name: 'jacket',
          images: ['https://some-image', 'https://some-image-2']