I have incorporated Quasar into my project using the following code:
<template>
<div class="q-pa-md">
<div class="q-gutter-sm row items-start">
<q-img
v-for="pic in picObject"
:key="pic.id"
:src="pic"
@error="reportError"
style="height: 140px; width: 140px"
>
<template v-slot:default>
<div class="absolute-bottom transparant-banner">This picture loaded ok.</div>
</template>
<template v-slot:error>
<div class="absolute-full flex flex-center bg-dark" style="color: red">Cannot load image</div>
</template>
</q-img>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
picObject: { "2": "https://images.takeshape.io/86ce9525-f5f2-4e97-81ba-54e8ce933da7/dev/144069dc-7390-4022-aa0f-abba022d3a2f/spec.jpg?auto=compress%2Cformat", "3": "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/prescribed_burn_oregon.jpg?crop=0,120,5760,3600&wid=1640&hei=1025&scl=3.5121951219512195", "4": "https://orig11.deviantart.net/1062/f/2015/315/9/6/abstract__7_by_thejsyve1-d9gciwk.jpg", "5":...
};
},
methods: {
reportError(event) {
console.log(`${event.name}: ${event.message}`);
}
}
};
</script>
<style>
.transparant-banner {
color: white;
}
</style>
When viewing on Chrome, I encounter errors on multiple images. However, everything functions as expected on Firefox. The Quasar q-img component relies on the javascript image() which triggers the onerror event.
Some of my questions are as follows:
- Why do these errors occur randomly even though the image appears to be successfully downloaded after the error happens?
- How can I resolve this issue?
The behavior can be observed in this jsfiddle, with relevant code in components/Example.vue.
EDIT: The error message reported is:
EncodingError - The source image cannot be decoded.According to source, the error is caused by .decode(). But what exactly is the reason behind it?
This article explains .decode() and its exclusive application to Chrome. In Quasar framework, the decoding process is handled here.