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

Inputfield URL Display

September 23 (1 year ago)

Hello!

I have this snippet of code:

<input type="text" name="attr_image_url" />
<input type="hidden" name="attr_calculated_image_url" />
<img src="@{calculated_image_url}" alt="Dynamic Image"/>



on("change:image_url", function() {
  getAttrs(["image_url"], function(values) {
      setAttrs({
          calculated_image_url: values.image_url
      });
  });
});


If I statically put in the URL to the image in the src element, it of course works. But if the src="@{calculated_image_url}" just gives me the broken thumbnail icon with "Dynamic Image".

Is there a way to have an input field they can paste the URL in and then it gets displayed?


TIA!

-Mike

September 23 (1 year ago)

Edited September 23 (1 year ago)
GiGs
Pro
Sheet Author
API Scripter

You can't do this:

<img src="@{calculated_image_url}" alt="Dynamic Image"/>

the @{attribute} syntax is for roll20 macros, and cannot be used in character sheet HTML like this. If you use image src you must include the exact address. If you want a dynamic image, you can do this:

<input type="text" name="attr_image_url" />
<div class="image-CSS" name="attr_image_url"> </div>

The url needs to include the https:// part.


You'll need to give the div used for the image some dimensions in CSS, like (and it doesn't need to be a div, but that is probably most convenient):

.image-CSS {
   height: 100px;
   width: 100px;
}

You don't need the width, but I think you need the height.


Also if the image used is from a site that uses hotlinking protection, it won't work.

September 23 (1 year ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator

As GiGs says. But note that you can also use the name property on the img element to have the img element itself show the image.

September 23 (1 year ago)
GiGs
Pro
Sheet Author
API Scripter


Scott C. said:

As GiGs says. But note that you can also use the name property on the img element to have the img element itself show the image.

I'm recovering from COVID and a bit muggy-headed so this might be something I should know but I'm drawing a blank. Can you give an example of that?

September 23 (1 year ago)
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
<input type="text" name="attr_image_url" />
<img class="image-CSS" name="attr_image_url">

Just like is done with the div.

September 23 (1 year ago)

Edited September 23 (1 year ago)
GiGs
Pro
Sheet Author
API Scripter

I didn't realise you could do that, being able to use the img element with a name tag is handy.

September 25 (1 year ago)

WOW! THANK YOU GUYS!!!!!!!!!!!!