<template>
  <figure>
    <img src="https://d21yo20tm8bmc2.cloudfront.net/2019/wedding-sign-700w.jpeg">
    <figcaption>
      The wedding was held out doors at a beautiful wooded venue in southern Tennessee.
    </figcaption>
  </figure>
</template>

<script>
export default {

};
</script>

<template>
  <figure>
    <cld-image
      :public-id="publicId"
      :width="width"
      :height="height"
      :alt="alt"
      crop="scale"
      quality="auto"
    />
    <figcaption v-if="caption">
      {{ caption }}
    </figcaption>
  </figure>
</template>

<script>
export default {
  props: {
    publicId: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '',
    },
    alt: {
      type: String,
      required: true,
    },
    caption: {
      type: String,
      default: null,
    },
  },
};
</script>

Use Cloudinary API for images.
Use Cloudinary API for images.

* https://cloudinary.com/documentation/vue_integration
