0

Starting to use the library PptxGenJs. Wanted to create a masterslide with a image/logo inserted into a slide. However when I open up the powerpoint I get a big red X instead of the graphic that I want. Currently using Powerpoint 2013 to open up my powerpoint

I've tried as well to add an image with the function

slide.addImage({OPTIONS});

and it still appears red. I've tried different types of images (jpeg and png) and still getting the same error. 

window.doDemo = function demo() {
    var pptx = new PptxGenJS();
    pptx.setLayout('LAYOUT_4x3')

    pptx.defineSlideMaster({
      title: 'MASTER_SLIDE',
      bkgd:  'FFFFFF',
      objects: [
        { 'line':  { x: 3.5, y:1.00, w:6.00, line:'0088CC', lineSize:5 } },
        { 'rect':  { x: 0.0, y:5.30, w:'100%', h:0.75, fill:'F1F1F1' } },
        { 'text':  { text:'Status Report', options:{ x:3.0, y:5.30, w:5.5, h:0.75 } } },

      ],
      slideNumber: { x:0.3, y:'90%' }
    });

    var slide = pptx.addNewSlide('MASTER_SLIDE');
    slide.addImage({ path:'hey.png', x:1, y:1, w:8.0, h:4.0 });
    slide.addText('How To Create PowerPoint Presentations with JavaScript', { x:0.5, y:0.7, fontSize:18 });

    pptx.save();

    }
Constantin Groß
  • 10,719
  • 4
  • 24
  • 50
ClubSavage
  • 45
  • 1
  • 7
  • And you did make absolutely sure that the image is available under that relative path (i.e. from wherever the script is being called)? – Constantin Groß Oct 18 '19 at 17:30
  • Yes, the image is there in the working folder along with the scripts – ClubSavage Oct 18 '19 at 17:32
  • I uploaded image online to an image hoster, and I referenced it to that picture and it works. Still not working with having the image locally. – ClubSavage Oct 18 '19 at 17:33
  • Are you calling this from a website, i.e. in a browser environment? In that case, the path should be relative to the page, not the JS files. Are they all in the same folder? Are there any error messages in the console? – Constantin Groß Oct 18 '19 at 17:34
  • The console error message is ```pptxgen.bundle.js:2 Access to XMLHttpRequest at 'file:///C:/Users/b0616717/Desktop/deno/hey.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.``` – ClubSavage Oct 18 '19 at 17:42
  • 1
    There you have it - the library is loading the image via an XMLHttpRequest - and for security reasons, this can't be done in a local file. Load your file from a local dev server like LAMPP/XAMPP instead. – Constantin Groß Oct 18 '19 at 17:44

0 Answers0