Javascript 在Vue.js中将图像从数据库显示到浏览器

我需要显示数据库中的一组图像。我将其作为一个blob存储到数据库中，并将其转换为base64字符串，这样前端代码就可以将其转换为图像。下面的代码无法工作，即使它将base64字符串从后端发送到前端。我从前端取的方式有问题吗

前端

<template>
<q-img
        v-for="(data, index) in base64data"
        :key="index"
        :src="'data:image/jpeg;base64,' + data"
        ratio="1"
      />
</template>

<script>
export default {
methods: {
getTests() {
      axios
        .get("http://localhost/MyComposer/", {
          params: {
            id: 6,
            token: this.token
          }
        })
        .then(res => {
          //console.log(res.data);
          this.base64data = res.data.TestImage;
          for (var i = 0; i < res.data.length; i++) {
            // this.base64data = res.data[i].TestImage;

            //console.log(this.base64data);
            this.dataList.push({
              subjectId: res.data[i].SubjectId,
              question: res.data[i].Question,
              answer: res.data[i].Answer,
              // testImage: res.data[i].TestImage,
              timer: res.data[i].Timer / 60
            });
          }
        });
    }
  },
}
}

---

在vue.js中，不应在属性上使用插值，而应使用

v-bind

或

：

。另一方面，您有一个硬编码值

1

at ratio，但在其上使用

v-bind

。你应该把它移到那里

<q-img v-for="data in base64data" :src="'data:image/jpeg;base64,' + data" ratio="1" />

关于您的答案，base64data必须有一个关于此的标签。不管怎样，这对我都不起作用。我确实在那个变量中有base64，我不明白为什么绑定不起作用。没有错误。它就是不出现。如果我在base64数据中添加了此项，则会出现一个错误。

base64数据

看起来如何？看起来像一个base64代码数组。它只需在我的整个控制台上放两张图片就可以了。起初它是一个blob，但我从后端转换了它。现在我想让它以图像的形式显示在前端。嗯，那么实际上我在这里帮不了你。我认为，在数据库中存储base64string并不是最好的解决方案

<q-img v-for="data in base64data" :src="'data:image/jpeg;base64,' + data" ratio="1" />