title: Cannot display local image in pdf document using pdfmake
body: <p>I'm trying to add an logo to a pdf document that is being generated by pdfMake. This is my code:</p>
  <pre><code>import {Injectable} from '@angular/core';
  import pdfMake from 'pdfmake/build/pdfmake';
  import pdfFonts from 'pdfmake/build/vfs_fonts';
  
  pdfMake.vfs = pdfFonts.pdfMake.vfs;
  
  @Injectable({
    providedIn: 'root'
  })
  export class PdfService {
  
    constructor() { }
  
    getDocumentDefinition(id: number, companyName, productName) {
      // productEvalDate: Date
      // getDocumentDefinition(id: number, productName: string, companyName) {
  
      return {
        content: [{
          image: '.assets/images/GPBC-logo-2019.jpg',
          width: 150,
          text: 'The product, listed below, produced for the company listed below, is PLANT-BASED certified ' +
            'under XXX Certification.\n \n' +
            'Name of Product: ' + productName +
            '\n Name of Producer/Owner: ' + companyName +
            '\n Product ID#: ' + id +
            '\n \n \n Signed by: XXX '
          // '\n \n \n This certificate is valid until: ' + productEvalDate
          ,
          fontSize: 20
        },
          {
  
  
          }]
      };
    }
  }
  </code></pre>
  <p>The result that I'm getting is that everything displays correctly; the text and the dynamic data. But there is no image display, and no error either.</p>
  <p>Since doing more research, I've changed the code as follows:</p>
  <pre><code>import {Injectable} from '@angular/core';
  import pdfMake from 'pdfmake/build/pdfmake';
  import pdfFonts from 'pdfmake/build/vfs_fonts';
  
  pdfMake.vfs = pdfFonts.pdfMake.vfs;
  
  @Injectable({
    providedIn: 'root'
  })
  export class PdfService {
  
    constructor() { }
  
    getDocumentDefinition(id: number, companyName, productName) {
      // productEvalDate: Date
      // getDocumentDefinition(id: number, productName: string, companyName) {
  
      return {
        content: [
  'The product, listed below, produced for the company listed below, is PLANT-BASED certified ' +
            'under XXX Certification.\n \n' +
            'Name of Product: ' + productName +
            '\n Name of Producer/Owner: ' + companyName +
            '\n Product ID#: ' + id +
            '\n \n \n Signed by: XXX '
          // '\n \n \n This certificate is valid until: ' + productEvalDate
          {
           image: './assets/images/GPBC-logo-2019.jpg',
          width: 150
  ,
          fontSize: 20
        },
          {
  
  
          }]
      };
    }
  }
  </code></pre>
  <p>I'm getting an error message as follows:Invalid image: File  not found in virtual file system Images dictionary should contain dataURL entries (or local file paths in node.js). I believe I need to convert the image to base64, but I don't really see clear instructions on how to do it. any help would be appreciated</p>