javascript - 如何使用 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

你想要的是一个data url .您需要将字节数组转换为 base64。无法使用原始字节。也许在计算属性中执行此操作，使用 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 倍二值图像。 Images in the DB are an antipattern . JSON 中的图像可以工作，但它们应该在 JSON 中编码为 base64 字符串。即便如此，它们也会降低 JSON 的可读性，并可能埋没像 Postman 这样的工具。数据网址为 much slower加载比常规网址。即使在数据库中有图像，如果您控制您的 api，您也可以通过制作仅返回字节数组的图像 api，使用 application/jpeg mime 类型获得很多。