title: How to export data table with images as PDF?
body: <p>I want to export the data table content as a PDF, including the images in the first column of every row. I am not sure why the image is not being added to the pdf file after export.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;img class=&quot;img-fluid&quot; src=&quot;/images/listing/{{$lis-&gt;image_path}}&quot; width=&quot;100px&quot; height=&quot;75px&quot; /&gt;&lt;/a&gt;
  </code></pre>
  <pre><code>//convert img to base64
  function getBase64Image(url, callback) {
      var img = new Image();
      img.crossOrigin = &quot;anonymous&quot;;
      var x = img.onload = function () {
          var canvas = document.createElement(&quot;canvas&quot;);
          canvas.width =this.width;
          canvas.height =this.height;
          var ctx = canvas.getContext(&quot;2d&quot;);
          ctx.drawImage(this, 0, 0);
          var dataURL = canvas.toDataURL(&quot;image/png&quot;);
          callback(dataURL);
          
      };
      img.src = url;
    }
  </code></pre>
  <p>the export part:</p>
  <pre><code>{
      extend: 'pdfHtml5',
      orientation: 'landscape',
      customize: function(doc) {
          //find paths of all images
          var arr2 = $('.img-fluid').map(function(){
            return this.src;
          }).get();
          for (var i = 0, c = 1; i &lt; arr2.length; i++, c++) {
                        getBase64Image(arr2[i], function(result){
                              doc.content[1].table.body[c][0] = {
                              image: result,
                              width: 100
                            }
                            
                        });
                        
                      }
           
      },
   
      exportOptions: {
          columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
          modifier: {
              selected: null
          },
      },
       
  },
  </code></pre>