Inserting a set of images

dsl101

I need to insert a large set of images which are then used in some JS to create a canvas. That bit is working fine, but I'm trying to convert this unmaintainable monster:

<img id="image1" src="{#asset image1.png @encoding=dataURI}" style="display: none" />
<img id="image2" src="{#asset image2.png @encoding=dataURI}" style="display: none" />
.
.
.
<img id="image99" src="{#asset image99.png @encoding=dataURI}" style="display: none" />

into this:

{{insertAllImages}}

I have a function in helpers.js which looks like this:

function insertArchetypeImages() {
	var html = ''
	_.forEach([
		'image1',
		'image2',
		.
		.
		.
		'image99'
	].forEach(name =>{
		html += '<img id="' + name + '" src="{#asset ' + name + '.png @encoding=dataURI}" style="display: none" />'
	})
	return html
}

And I get the error:

Error during rendering report: Asset ' + name + '.png not found

I'm guessing #asset is a helper, and/or I can't use brace expressions inside a helper like that. But I couldn't figure out from the handlebars docs how to call one from another. I'm also guessing there's a better way to do this in jsreport... Any advice?

Thanks!

bjrmatos

hi! since assets are resolved inside of helpers too the asset name is resolved to {#asset ' + name + '.png @encoding=dataURI} (because that is what it is in the helper file), what you want is to resolve/and insert the asset in the template (not in the helper), so if you only want to use the helper to construct the asset syntax call you will need to do something like the following: https://playground.jsreport.net/studio/workspace/SyNJYjc7W/5

just note that you can also do the iteration in the template (using handlebars each) and create the images there too.

dsl101

Right - so just return the array from the helper and use {{#each}} in the template. That makes sense. I've been programming in VueJS for months now, and switching to another templating set up is confusing :).