I am currently working on an express vue application and facing an issue with displaying images in vue.
Within a vue page, I utilize axios.get in the vue js beforeMount hook to retrieve image data in base64 format from an API.
I store this data in an array. However, while texts appear without any problem, the images do not show up consistently. Sometimes after certain actions like editing code, the images briefly appear but then the issue persists.
Here is the vue js code snippet:
<template>
<div v-for="(designImg, i) in designImgs" :key="i">
<q-img
:src="designImg"
height="100px"
class="bg-grey-4"
/>
</div>
<template>
<script>
data () {
return {
designImgs: null
}
},
beforeMount () {
this.$axios.get('shop/product', {
params: {
designId: this.$route.params.designId,
}
}).then((res) => {
if (res.data.error) {
console.log(res.data.error)
} else {
const designImgUrls = res.data.imageUrls.split(',')
const mydesignImgs = []
for (let i = 0; i < designImgUrls.length; i++) {
this.$axios.get('/shop/image', {
params: {
url: designImgUrls[i]
}
}).then((res) => {
const url1 = 'data:image/jpeg;base64, ' + res.data
mydesignImgs[i] = url1
}).catch(err => {
console.log(err)
})
}
this.designImgs = mydesignImgs
}
}).catch((err) => {
console.log(err)
})
}
<script>
It's worth noting that the server provides us with the following data:
imageUrls: "uploads\imagee-1592862806606.jpg,uploads\imagee-1592862806654.jpg"
After fetching the image data, res.data contains the base64 representation of the image like this:
/9j/2wBDAAYEBQYFBAY...