med-appointments/src/components/Photo.vue

<template>
  <div v-if="photo">
    <img class="photo" alt="Photo of current user." :src="photo" />
  </div>
  <div v-else>
    <span class="photo-missing">👤</span>
    <p>No photo on file.</p>
  </div>
</template>

<script>
export default {
  name: "Photo",
  props: ["photo"]
};
</script>

<style scoped>
.photo {
  max-width: 100px;
  min-width: 40px;
}
.photo-missing {
  font-size: 150px;
}
</style>