BaseResultImage

Component to be reused that renders an <img>.

Props

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

Slots

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

Examples

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>
  <template #fallback>
    <img alt="Fallback image" src="./fallback-image.svg"/>
  </template>
</BaseResultImage>

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.

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