Dynamic Image in Roll Templates

Hello

I am working on my custom character sheet for d&d5e to incorporate my homebrew. It's going very well, but I've encountered a minor issue that I hope to find resolution for.

I've hand-picked an icon for every spell that is available in my game from a github repository of icons and they are very neatily shown in the character sheet, but when I try to create a roll template with said image, I'm encountering a problem. I am following this site:

https://wiki.roll20.net/Image_use_in_character_sheets

At the bottom it says I can embed parameters into roll template image source like so (copied from the guide):

<rolltemplate class="sheet-rolltemplate-rolls">
<!-- roll template stuff -->
  <img src="www.url.com/scatter-diagram-{{direction}}.png"/>
<!-- roll template stuff-->
</rolltemplate>

Now, I am using parameters like so fo other stuff (like coloring spell header according to the spell school), but the image does not seem to want to work.

This is a nipped of my HTML file:

(template)

<rolltemplate class="sheet-rolltemplate-spell">
  <div class="sheet-container sheet-color-{{color}}">
    <div class="sheet-header">
      {{#title}}<div class="sheet-title">{{title}}<img class="sheet-spellimage" src="{{image}}"> </div>{{/title}}
      {{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
    </div>
    <div class="sheet-content">
      {{#allprops() title subtitle desc color image}}
      <div class="sheet-key">{{key}}</div>
      <div class="sheet-value">{{value}}</div>
      {{/allprops() title subtitle desc color image}}
      {{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
    </div>
  </div>
</rolltemplate>

Part of the code in the roll button:

var image = s.repeating_spell_img;
startRoll("&{template:spell} {{title="+title+"}} {{subtitle="+subtitle+"}} {{image="+image+"}} {{color=" + schoolEng + "}} {{roll1=[[1d20]]}}", (results) => {

Now, what this yields is just an empty image frame. When I put the link directly into the template, it works fine and dandy.

I've even tried just replacing part of the link (since all images are in the same folder, they share part of the link), but the resulting link included the "{{image}}", so this leads me to believe that the parameter is not replaced at all.

I tried an alternative of just adding [x](LINK) as image, but it does not seem to render properly - I checked that with simple chat input and the image is not recognised. I'm not sure why either. If it helps, this is an example image of a fire bolt spell that I use:

https://raw.githubusercontent.com/Gethe/wow-ui-textures/refs/heads/live/ICONS/Spell_Fire_FireBolt.PNG

Is this an error in the guide or am I a potato and doing something wrong? I'd appreciate any pointers!

Cheers!

Couple things to check;
Can you get a value for 'image' from inside your worker?
ie

console.log(`image url: ${image}`);

(place log just after you set var image);

If not, are you using getSectionIDs() with getattrs() to grab the repeating data?

Yes I can, I only posted part of the code, the data is fetched through getAttrs(). Console log outputs a neat link, it's clickable and redirects where it should.

Just so we're clear, putting your snippet just below initialising th "image" var outputs this into console:

image url: https://raw.githubusercontent.com/Gethe/wow-ui-textures/refs/heads/live/ICONS/Spell_Fire_FireBolt.PNG

That's good you are getting the proper url in the worker.
The fact you have an issue even displaying the image in chat using [x](URL) is sus...  Maybe the vtt does not like PNG vs png and is not recognizing it as an image?  Not sure. 
Try appending '#.png' and see if that helps.
[x](https://raw.githubusercontent.com/Gethe/wow-ui-textures/refs/heads/live/ICONS/Spell_Fire_FireBolt.PNG#.png)
If that works you can try doing similar to your worker url's.  Or maybe rename to lowercase and see if that matters.

Appending with '#.png' was exactly what I needed. With some css tomfoolery I managed to position the image in the correct spot and now it's perfect.

Thank you kind wizard!

Cool beans.