如何使用 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 上显示为二进制数据。物体看起来像这样，

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

原文由 CoderPJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 倍。 数据库中的图像是一种反模式。 JSON 中的图像可以工作，但它们应该在 JSON 中编码为 base64 字符串。即便如此，它们也会降低 JSON 的可读性，并可能埋没像 Postman 这样的工具。数据 url 的加载速度比常规 url 慢得多。即使在数据库中有图像，如果你控制你的 api，你可以通过制作只返回字节数组的图像 api，使用 application/jpeg mime 类型获得很多。

原文由 bbsimonbb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 Base64 格式加载图像数据，如下所示，

 <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEVBMTczNDg3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEVBMTczNDk3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRUExNzM0NjdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUExNzM0NzdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=">

对于你的问题，

 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 = 'data:image/jpeg;base64,' + btoa(response.data.results[0].image.data);
        }
  }
}

在模板中，

 <template>
    <div class="ui items">
        <div class="item">
            <div class="ui small image">
                <img :src="info.image">
            </div>
        </div>
    </div>
</template>

原文由 Casper 发布，翻译遵循 CC BY-SA 3.0 许可协议