Problem in Vue Express with displaying image

I’m developing an express vue app. I have a problem in displaying image in vue.

In a vue page, I run an axios.get in vue js beforeMount hook, and get images data in base64 from API.

Then save data in an array. I don’t see images but texts haven’t problem. In some page refreshes like editing code and … I see images but then problem remain.

vue js code:

<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>

Note that in above code we recieve from server these data:

imageUrls: "uploads\imagee-1592862806606.jpg,uploads\imagee-1592862806654.jpg"

and then after getting images data res.data is equals to a base64 image data like this:

/9j/2wBDAAYEBQYFBAY...