How to display mysql blob image in html using Vuejs?

Question

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;
        }
  }
}

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>

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!

Roveover

Answer 1

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.

Markup

<img :src="dataUrl">

Behaviour (untested!)

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

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.

Symbolist

Please check my post. It has been updated. I have shared what the JSON response of the image looks like – Roveover

Answer 2

You can load image data using Base64 format, like this,

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

For your problem,

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);
        }
  }
}

In template,

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

Questa

It certainly is a solution, but not very efficient. This is a tedious task. There are multiple images that need to be loaded from the database in the future. is there any built-in functions I could use? Thanks! – Roveover

Not sure there is better way. But to make it more clear take a look here. – Till

Not sure about better way, but you can check this one also https://mcmap.net/q/1481065/-binding-img-src – Questa

@Till Thanks. Please check my post. It has been updated. I have shared what the JSON response of the image looks like. – Roveover

@CasperSL Please check my post. It has been updated. I have shared what the JSON response of the image looks like – Roveover

check this #14915558 – Questa

Answer 3

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

Inequity