External Images in jsreport Online

awicz

I'm using a script to build a dynamic grid of images in a report. While testing I used the code below to loop through an images array that referenced 'local' images already uploaded to jsreport studio. In production, that same array will be populated by a variable number images from a S3 bucket. I'm running into the error of the images being not found, although they are confirmed to be publicly accessible. I suspect that jsreport is reading the s3 links as a relative file locations, but I'm not sure how to change that in the online version.

Any help would be greatly appreciated!

 var createNewRow = true;
    var firstImage = true
    
    {{#each images}}
    
    var i = {{0}}
    
    if(createNewRow){
        var table = document.getElementById("images");
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(-1);
        cell1.innerHTML = "<img src= { #asset {{this}} @encoding=link }  /> <p>{{0}}</p> ";
        if(firstImage){
            createNewRow = false;
            firstImage = false
        } 
        
        else if(i % 2 == 0){
            createNewRow = false;
        }
        
        else{
            createNewRow = true;
        }
        
    }

jan_blaha

Please try an html recipe and inspect with F12 what is actually outputted before pdf printing.
How do the img tags look like?

awicz

Thanks for the quick response. Unfortunately, there's not much to inspect because of the error...i.e. no img tags at all:

Error: Asset https://s3.amazonaws.com/***/****/***.png not found
    at readAsset (/usr/src/app/node_modules/jsreport-assets/lib/assets.js:226:15)
    at <anonymous>

jan_blaha

Because you are using "https://s3.amazonaws.com///**.png" as asset name.
In case it is a final link, why do you use an asset? You can use just html img

<img src='https://s3.amazonaws.com/***/****/***.png'>
<img src='{{this}}' />

awicz

Oy. Well this is embarrassing. I started with your proposed solution, and obviously I fat fingered something. This led me to the documentation, and I thought I needed to specify that it was a link. Obviously not. Thanks, Jan!