MapComplete/src/UI/Image/AttributedImage.svelte

<script lang="ts">
  /**
   * Shows an image with attribution
   */
  import ImageAttribution from "./ImageAttribution.svelte"
  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
  import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
  import { UIEventSource } from "../../Logic/UIEventSource"

  export let image: ProvidedImage
  let fallbackImage: string = undefined
  if (image.provider === Mapillary.singleton) {
    fallbackImage = "./assets/svg/blocked.svg"
  }

  let imgEl: HTMLImageElement
  export let imgClass: string = undefined
  export let previewedImage: UIEventSource<ProvidedImage> = undefined
</script>

<div class="relative">
  <img
    bind:this={imgEl}
    class={imgClass ?? ""}
    class:cursor-pointer={previewedImage !== undefined}
    on:click={() => {
      previewedImage?.setData(image)
    }}
    on:error={(event) => {
      if (fallbackImage) {
        imgEl.src = fallbackImage
      }
    }}
    src={image.url}
  />

  <div class="absolute bottom-0 left-0">
    <ImageAttribution {image} />
  </div>
</div>