时间戳

首页 > 解决方案 > 在 Vue.js 中从数据库显示图像到浏览器

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
            });
          }
        });
    }
  },
}
}

后端

public function getTest()
    {
        $datab = new ConnectDb;
        $db = $datab->Connect();


        // if (isset($_GET['id']) && $_GET['id'] == 3) {

        //  $db->where('AccessId', $_GET['token']);
        //  $testdb = $db->get('testdetails');
        //  echo json_encode($testdb);
        // }

        if (isset($_GET['id']) && $_GET['id'] == 6) {

            $db->where('AccessId', $_GET['token']);
            $testdb = $db->get('testdetails');

            foreach ($testdb as $test) {
                $testdb2 = base64_encode($test['TestImage']);
                header("content-type: image/jpeg");
            }



            // $db->where('AccessId', $_GET['token']);
            // $db->where('TestImage', base64_encode($testdb2));
            // $testdb3 = $db->get('testdetails');


            echo json_encode($testdb2);
            print_r($testdb2);
        }
    }

标签： javascriptphpvue.js

解决方案

在 vue.js 中，你不应该在属性上使用插值，使用v-bindor:代替。另一方面，您有一个硬编码1的比率值，但使用v-bind它。你应该在那里删除它。

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

推荐阅读