Can't handle image loading error #48
Comments
|
@madiyetov I think in the next update to the component, I'm going to switch to allowing an |
|
@madiyetov I have been using this package and found a way around it. I created a component with a hidden image element and listened to the events of the hidden image element to affect the See the following code: <template>
<div>
<img
v-show="false"
:src="src"
:alt="alt"
@load="onLoaded"
@error="onError"
/>
<inner-image-zoom
v-if="!loading && !error"
class="h-full w-full"
:src="src"
:zoomSrc="src"
:zoomType="zoomType"
/>
<CommonSkeletonLoader v-else-if="loading && !error" class="h-full w-full" />
<img
v-else-if="!loading && error"
class="h-full w-full"
src="~/assets/images/no-photo.png"
:alt="alt"
/>
</div>
</template>
<script setup lang="ts">
import "vue-inner-image-zoom/lib/vue-inner-image-zoom.css";
// @ts-ignore
import InnerImageZoom from "vue-inner-image-zoom"; // This libirary doesn't have types
const props = defineProps({
src: {
type: String,
},
zoomType: {
type: String,
default: "hover",
},
alt: {
type: String,
},
});
const error = ref(false);
const loading = ref(true);
const onLoaded = () => {
error.value = false;
loading.value = false;
};
const onError = () => {
error.value = true;
loading.value = false;
};
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am trying to show
fallbackimage when image fails to load. Currently I can't do it, because an error event ofimgdoes not bubble, therefore it's not possible to somehow react to that event.I guess we can:
<img @error="(e) => $emit('error', e)" />lfallbackfeature in the component itself.@laurenashpole wdyt? Maybe there are other approaches.
The text was updated successfully, but these errors were encountered: