title: How to render blob image in vue.js stored in database
body: <p>I am using Vue.js in the front-end. I have Node.js, Express, PostgreSQL (with <a href="http://docs.sequelizejs.com/" rel="noreferrer">Sequelize</a> ) on the backend. </p>
  
  <p>I am storing an item in the database that includes  a thumbnail image. </p>
  
  <p><strong>Database Model</strong></p>
  
  <pre><code>const Item = sequelize.define('item', {
      id: {
          type: Sequelize.INTEGER,
          primaryKey: true,
          autoIncrement: true
      },
      name: {
          type: Sequelize.TEXT,
          allowNull: false,
      },
  
      image: {
          type: Sequelize.BLOB('long'),
          allowNull: true,
      },
  </code></pre>
  
  <p>Database-wise, the image is being stored as a Blob and I think this is fine (and yes, I am aware that it's not best-practice to put images in a database). </p>
  
  <p>I observe in the browser that the object that I am accessing in my Vue template with <code>this.item.image</code> is an Object of the type <code>Buffer</code>. </p>
  
  <p><a href="https://i.stack.imgur.com/PRpaY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PRpaY.png" alt="Console shows this is an Object with type Buffer"></a></p>
  
  <p><strong>Adding to Database</strong></p>
  
  <p>I add the item to the database in the browser with this in my  vue template:</p>
  
  <pre><code>     &lt;label for="image" class="itemCreate__field itemCreate__field--image"&gt;
         &lt;span class="itemCreate__fieldLabel"&gt;Image&lt;/span&gt;
         &lt;input id="file"  type="file" accept="image/*" @change="onFileChange"/&gt;
          &lt;img v-if="itemPreviewImage" :src="itemPreviewImage" /&gt;
       &lt;/label&gt;
  </code></pre>
  
  <p>And that HTML relies on these methods:</p>
  
  <pre><code>     onFileChange(evt) {
          const files = evt.target.files || evt.dataTransfer.files;
          if (!files.length) return;
          this.createImage(files[0]);
  
      },
      createImage(file) {
          const image = new Image();
          const reader = new FileReader();
  
          reader.onload = evt =&gt; {
              this.itemPreviewImage = evt.target.result;
              this.item.image = evt.target.result;
          }
  
          reader.readAsDataURL(file);
      },
  </code></pre>
  
  <p>I have this in the vue template that renders the image:</p>
  
  <pre><code>        &lt;div v-if="item.image"&gt;
              &lt;img :src="imgUrl" alt="Picture of item"/&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>Rendering from Database</strong></p>
  
  <p>I have tried the following approaches, which do not work:</p>
  
  <p><code>createObjectUrl</code> borrowed from <a href="https://github.com/kripken/sql.js/wiki/Display-an-image-stored-in-a-BLOB-in-a-browser" rel="noreferrer">here</a>:</p>
  
  <pre><code>    imgUrl(){
        const objUrl = window.URL.createObjectURL(new Blob(this.item.image.data));
  
        return objUrl;
      }
  </code></pre>
  
  <p>Creating a base64 string borrowed from <a href="https://stackoverflow.com/questions/48140223/how-to-display-an-image-in-react-from-postgresql">here</a>:</p>
  
  <pre><code>    imgUrl(){
          const intArray = new Uint8Array(this.item.image.data);
          const reducedArray = intArray.reduce((data, byte) =&gt; data + String.fromCharCode(byte), '');
  
          const base64String = `data:image/png;base64, ${btoa(reducedArray)}`;
  
  
          return base64String;
      }
  </code></pre>
  
  <p>Creating a new <code>Uint8Array</code> and then getting an objectUrl (borrowed <a href="https://gist.github.com/candycode/f18ae1767b2b0aba568e" rel="noreferrer">here</a>):</p>
  
  <pre><code>imgUrl(){
    const arrayBuffer = new Uint8Array(this.item.image);
    const blob  = new Blob([arrayBuffer], {type: "image/png"});
  
    return window.URL.createObjectURL(blob);
  
  }
  </code></pre>
  
  <p>In all cases (including some attempts with FileReader), I get broken images. I don't get errors in the console, though. </p>
  
  <p>I <em>think</em> the issue is that I am not submitting correct data to the database. </p>
  
  <p>I am sending an Ajax request that has the File attached as a property, and I should probably convert it to ¿something else? </p>