Inputfield URL Display

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

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.

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.

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?

<input type="text" name="attr_image_url" /> <img class="image-CSS" name="attr_image_url"> Just like is done with the div.

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

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