Vue Express 中显示图像的问题答案

【问题标题】：Problem in Vue Express with displaying imageVue Express 中显示图像的问题
【发布时间】：2020-10-14 14:49:48
【问题描述】：

我正在开发一个 express vue 应用程序。我在 vue 中显示图像时遇到问题。

在 vue 页面中，我在 vue js 中运行 axios.get beforeMount 钩子，并从 API 获取 base64 格式的图像数据。

然后将数据保存在一个数组中。我看不到图像，但文字没有问题。在某些页面刷新中，例如编辑代码......我看到了图像，但问题仍然存在。

vue js 代码：

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

请注意，在上面的代码中，我们从服务器接收这些数据：

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

然后在获取图像数据后 res.data 等于 base64 图像数据，如下所示：

/9j/2wBDAAYEBQYFBAY...

【问题讨论】：

你只是在uploads\imagee-1592862806606.jpg的开头添加base64吗？
不，我再次从服务器加载图像 sata 并在开头添加 'data:image/jpeg;base64,'

标签： javascript express vue.js axios

【解决方案1】：

我已经解决了这个问题。我改变了在 mydesignImgs 数组中收集图像数据的方式。我用过这段代码：

mydesignImgs.push(url1)

而不是使用这个等式：

mydesignImgs[i] = url1

但是为什么？

【讨论】：