How to render blob image in vue.js stored in database How to render blob image in vue.js stored in database vue.js vue.js

How to render blob image in vue.js stored in database


First, be sure you're getting a valid base64 string: https://codebeautify.org/base64-to-image-converter

Then try defining a getter to the Item model

const Item = sequelize.define('item', {    ...    image: {        type: Sequelize.BLOB('long'),        allowNull: true,        get () { // define a getter            const data = this.getDataValue('image')            return data ? data.toString('base64') : ''        },        set(val) {          this.setDataValue('image', val);        }    },    ...}

Computed property

imgURL () {    return this.item.image        ? 'data:image/png;charset=utf-8;base64,' + this.item.image         : '' // some default image}