Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Problems loading images in rolltemplates

January 22 (3 weeks ago)

Edited January 22 (3 weeks ago)
Evilbram
Pro
Marketplace Creator
Sheet Author

Hello, I have been developing character sheets for some time now and I find myself facing a problem that I cannot explain despite several attempts at resolution.


It turns out that I integrate images to dress up my rolltemplates. However, while the images load correctly when the images are "new", when I restart the game, by inspecting Chrome's DEVTools, I realize that the links of my images are modified with the prefix

https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_middle.webp


However when I check the link, access denied appears and therefore an image not displayed in the rolltemplate.


After browsing the forum, I understood that the prefix allows roll20 to secure access to images, however, in my case (and perhaps others) the prefix thus added to the CSS does not allow display .


I pushed my research a little, and it turns out that the problem only appears in the rolltemplate, to the extent that in the sheet itself, the prefix is ​​not added, and therefore the problem does not appear. 


I tried several actions, such as setting the image links to variables, clearing the cache, making sure that the link folder does not contain special characters, I even pointed directly to the Roll20 github to the extent where my character sheet has been validated and merge. But so far without success. The only temporary way to resolve the problem is to modify the name of the images to reload the css and the part so that the prefix problem does not prevent the display of the images. I also tried with a browser other than Chrome but I encountered the same problem with images not loading.


I would like to point out that my "live" part is under jumpgate, and the problem also persists in the sandbox.


Knowing that our games on Roll20 are streamed, this display problem is quite detrimental in terms of viewer experience.


Thank you in advance for any leads or help that would allow me to resolve this issue.

Here is also a link to the game table if necessary: https://app.roll20.net/campaigns/details/18864798/obscuritas-aeterna


Link to character sheet folder (the css on Github does not contain the variable modification that I set up to test before posting this message):

https://github.com/Roll20/roll20-character-sheets/tree/master/Obscuritas

==> rolltemplate css around line 4270


Part of the rolltemplate css: 

  --roll_middle: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_middle.webp);
  --roll_background: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/background.webp);
  --roll_top: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_top.webp);
  --roll_bottom: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_bottom.webp);
  --roll_separation:url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_separation.webp);


Part of the css via DevTolls chrome:

  1. --roll_middle: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_middle.webp);
  2. --roll_background: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/background.webp);
  3. --roll_top: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_top.webp);
  4. --roll_bottom: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_bottom.webp);
  5. --roll_separation: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/roll_separation.webp);
January 22 (3 weeks ago)

Edited January 22 (3 weeks ago)
vÍnce
Pro
Sheet Author

Curious.  Does this happen only with .webp images or does it matter? I have sheets that include other image types(png, jpg, gif) in the roll template and do not appear to have any issues.

Not sure if it matters but I don't see the webp images displayed on github if I click on an image directly in the Obscuritas/images/ folder.
https://github.com/Roll20/roll20-character-sheets/blob/master/Obscuritas/images/aura_ange.webp
for comparison, I can click on this image from another sheet that uses png and it displays without issue.
https://github.com/Roll20/roll20-character-sheets/blob/master/Forbidden_Lands/images/bane_skull_black.png



January 22 (3 weeks ago)
Evilbram
Pro
Marketplace Creator
Sheet Author

As this is a sheet that includes a large number of images, to avoid having an image folder that is too large, I converted everything to webp.


In the character sheet itself, the files are also in webp and this poses no problem. Thinking about it, it is true that Roll20 security can differ between the sheet itself and the chat window, webp compatibility could be the origin of the problem.


I actually haven't tested using PNGs for the Rolltemplate part, or rather I haven't tested in this scenario. I'm going to test this, and if it's successful, at least it might help other sheet designers if they encounter this problem.


I will keep you informed of the results!


P.S: As for displaying the webp on GitHub, to display them you just have to follow the link given so that the image is displayed, and the webp images are correctly displayed in the character sheet. ==> https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_ange.webp

January 22 (3 weeks ago)
Evilbram
Pro
Marketplace Creator
Sheet Author

I have just migrated all the images from the webp Rolltemplate to PNG and it seems that the problem is resolved.


The imgsrv..... prefix is added but this time access to the resulting image link is accessible and the image correctly displayed.


Conclusion: Webp images are accepted on the charsheet itself, however, should be avoided for use in RollTemplates.


Thank you in any case for the lead given and the resolution of my problem.

January 23 (3 weeks ago)
Nora C.
Roll20 Team

Hello/Bonjour!


There was a recent update to our imgsrv sanitization and it looks like this was an unintended effect. I've looked into this and raised it with the appropriate team so we can get it fixed. If you'd like to submit a fix to your sheet by replacing these images with .png files, I'll try to keep an eye on the repo's PRs, but we'll do our best to get a solution out as soon as possible so your rolltemplate images will start loading again.


Thanks for raising this!

January 28 (2 weeks ago)
Nora C.
Roll20 Team

Apologies, gang

It's been raised to my attention that .webp images are not supported in rolltemplates as a security measure, so this is actually working as expected. The sheet will need to be updated to use .png files.

January 29 (2 weeks ago)
vÍnce
Pro
Sheet Author

Added this to the wiki;
https://wiki.roll20.net/Building_Character_Sheets/Roll_Templates#Restrictions