如何使用Vuejs在html中显示mysql blob图像？

Question

我有一个这样的Vue文件，

export default {
	data(){
		return{
            info: {
                name: '',
                image: '',
              
            },
            errors: []
		}
	},
  
  created: function(){
        this.getInfo();
  },
  
  methods: {
        getInfo: function(){
              this.info.name = response.data.results[0].name;
              this.info.image = response.data.results[0].image;
        }
  }
}

我正在将数据从该文件传递到子Vue组件中。子组件如下：

<template>
    <div class="ui items">
        <div class="item">
            <div class="ui small image">
                {{info.image}}
            </div>
        </div>
    </div>
  
</template>

<script>
export default{

    props:['info']

}
</script>

我的图像作为Blob存储在MySQL数据库中。当我运行应用程序时，图像在UI上显示为二进制数据。对象看起来像这样，

这里有人可以帮助我显示图像吗？非常感谢你！

Answer 1

您想要的是一个数据URL。您将需要将字节数组转换为base64。无法使用原始字节。也许可以在计算属性中执行此操作，对base64函数使用字节数组之一。

标记

<img :src="dataUrl">

行为（未经测试！）

computed : {
    dataUrl(){
        return 'data:image/jpeg;base64,' + btoa(
            new Uint8Array(this.info.image)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
        );
    }
}

搜索您的良心。这真的不是一个好主意:-)以JSON编码的字节数组形式发送图像是我从未见过的 事情，并且猜测会比二进制图像大10倍。DB中的图像是反模式。JSON中的图像可以工作，但应在JSON中将它们编码为base64字符串。即使这样，它们也会降低JSON的可读性，并且可以掩埋诸如Postman之类的工具。数据网址的加载速度比常规网址要慢得多。即使使用数据库中的图像，如果您控制自己的api，也可以通过使用应用程序/ jpeg mime类型制作仅返回字节数组的图像api来获得很多收益。