如何使用Vuejs在html中显示mysql blob图像? [英] How to display mysql blob image in html using Vuejs?

问题描述

我有一个这样的Vue文件，

I have a vue file like this,

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组件中.子组件如下，

I am passing data from this file into a child Vue component. The child component is as follows,

<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上显示为二进制数据.该对象看起来像这样，

My image is stored as a blob in a MySQL database. When I run my application, the image appears as binary data on the UI. The object appears like this,

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

Can anybody here help me in displaying the image? Thank you very much!

推荐答案

您想要的是 base64函数的字节数组之一在计算的属性中执行此操作.

What you want is a data url. You will need to convert the byte array to base64. There is no way to use the raw bytes. Perhaps do this in a computed property, using one of the byte array to base64 functions.

标记

<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倍.二进制图片.数据库中的图像是反模式.JSON中的图像可以工作，但应在JSON中将它们编码为base64字符串.即使这样，它们也降低了JSON的可读性，并且可以掩埋诸如Postman之类的工具.数据网址的加载速度比常规网址要慢得多.即使数据库中有图像，如果您控制自己的api，也可以通过使用应用程序/jpeg mime类型制作仅返回字节数组的图像api来获得很多好处.

Search your conscience. This is really not a good idea :-) Sending images as a JSON encoded byte array is something I've never seen, and will be about, guessing, 10x larger on the wire than the binary image. Images in the DB are an antipattern. Images in JSON work, but they should be encoded as base64 strings in the JSON. Even then, they reduce the readability of the JSON, and can bury tools like Postman. Data urls are much slower to load than regular urls. Even with images in the DB, if you control your api, you can gain a lot by making image apis that return just the byte array, with an application/jpeg mime type.

这篇关于如何使用Vuejs在html中显示mysql blob图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！