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

Answer 1

你需要的是一个data 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中的图像可以正常工作，但它们应该以base64字符串形式编码在JSON中。即使如此，它们也会降低JSON的可读性，并且可能会隐藏类似Postman的工具。数据URL加载速度比常规URL慢得多。即使有图像在数据库中，如果您控制您的API，您可以通过创建仅返回字节数组的图像API，并使用application / jpeg MIME类型获得很多收益。

- bbsimonbb

---

请查看我的帖子。它已经更新了。我分享了图像的JSON响应长什么样子。 - CoderPJ

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

---

这确实是一个解决方案，但效率不高。这是一项繁琐的任务。未来需要从数据库加载多个图像。有没有内置函数可以使用？谢谢！ - CoderPJ

不确定是否有更好的方法。但为了更清晰，可以在这里查看。 - Anwarus

不确定是否有更好的方法，但您也可以检查这个链接：https://stackoverflow.com/questions/41859827/binding-img-src - Casper

@Anwarus 谢谢。请检查我的帖子。已经更新了。我分享了图片的JSON响应长什么样子。 - CoderPJ

@CasperSL 请检查我的帖子。已经更新了。我分享了图片的JSON响应长什么样子。 - CoderPJ

请查看以下链接：https://dev59.com/mmUp5IYBdhLWcg3w8bNB - Casper

Answer 3

<img :src="require(`../../assets/images/products/${product.img}`)" />

- Alok Chaudhary