2023-12-05 18:35:18 +01:00
|
|
|
<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"
|
|
|
|
|
|
|
|
export let image: ProvidedImage
|
|
|
|
let fallbackImage: string = undefined
|
|
|
|
if (image.provider === Mapillary.singleton) {
|
|
|
|
fallbackImage = "./assets/svg/blocked.svg"
|
|
|
|
}
|
|
|
|
|
|
|
|
let imgEl: HTMLImageElement
|
2023-12-06 17:27:30 +01:00
|
|
|
export let imgClass: string = undefined
|
2023-12-05 18:35:18 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="relative">
|
2023-12-06 17:27:30 +01:00
|
|
|
<img bind:this={imgEl} src={image.url} class={imgClass ?? ""} on:error={(event) => {
|
2023-12-05 18:35:18 +01:00
|
|
|
if(fallbackImage){
|
|
|
|
imgEl.src = fallbackImage
|
|
|
|
}
|
|
|
|
}}>
|
|
|
|
|
|
|
|
<div class="absolute bottom-0 left-0">
|
|
|
|
<ImageAttribution {image}/>
|
|
|
|
</div>
|
|
|
|
</div>
|