Changing images in javascript

Authoring Twine
1

I have this code to change images in javascript:

document.getElementById(img).src = "https://caoseamor.neocities.org/O/cripto-a.png";

But I need to use the internal (base64) media passage instead of an URL. How can I do it?

1 Like
2

You need to convert your image to base 64 string.

You can use any online converter like: https://www.base64-image.de/

Here is a codepen with the code working:

If you need to convert it “on fly”, thats another problem : )

3

If you’ve already embedded the image as an actual media passage, via a compiler or manually, then the passage’s source is all you need, being the Base-64 encoded form of the image.

Try the following:

document.getElementById(img).src = Story.get("image passage name").text.trim();
2 Likes
4

That was it! Thanks. I knew I could count on you! I imagined the first part and struggled trying to figure out what the second part was, I tried “processtext” and it didn’t work. But you always help me, I’m very grateful!

5

Thanks, I use Twine Enhancer to create Media Passages “on the fly”, and my question was about how to change an image in javascript. But TheMadExile has solved that. Thanks anyway.

1 Like