Help with Base64 Images

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: online,
Story Format: Harlowe 3.1.0

Hello! I’ve been creating a Twine for work, and have had a fairly easy time of uploading images until this one passage. I’ve troubleshooted as much as I can, but I’ve hit a dead end. I’ve been converting my images to Base64, and using the same steps I’m doing now, have successfully added at least 7 other .pngs or .jpgs.

Here are screenshots of what my backend looks like (if it’s helpful to have the full Base64 code, I can add that; it was just super long):

img { max-width:100%; max-height: 100%; }

OneSearch results page for college AND athletes AND pay

“You can use the filters on the left to limit to peer reviewed journals, scholarly articles, books - whatever you’re looking for. If you want to give it a try, here’s a link to a tutorial on how to search using OneSearch.”

<a href=“https://utk.libwizard.com/id/5d266fa7b45974295e2e2f85244f56ae”; target="_blank">Click here to open the tutorial.

“Are you getting some good results, or do you want to try a database?”

[[I’d like to try a database.]]

[[I need to include at least two primary sources - how do I find those?]]

[[I’m good looking through these, thanks.]]

When I publish it to file or play test it, usually it’s taken the words for my external link (Click here to open the tutorial), put it at the top of the page with the image icon, eliminated the text in between, and skipped down to the external link. When I looked at the source, immediately after adding the Base64 code, it only showed <img src= , without the code I’d just applied. Now, however, it’s giving me this:

I’ve deleted the passage and rewritten it, because I’ve been able to add images to other passages in the game while taking a break from this problem. Any suggestions would be greatly appreciated!

1 Like

That uploaded a little weird, so here’s the screenshot of the beginning of the code:

It looks like you’re just missing the </a> after “tutorial.” Also, there shouldn’t be a semicolon like that within the <a> element.

Hopefully that was it.

P.S. When posting code here you should put that within a “Preformatted Text” block, by selecting the code and using the </> button in the editor.

Thanks for the tips, but sadly, neither of those worked.

What I’m finding that’s happening is I can post the Base64 code in the passage, but when I go to preview it, the source only shows <img src="; I can go back to the passage and see the code (which I’ve been getting from https://www.base64-image.de/), but it disappears when testing or when I’ve downloaded the file.

I’m wondering if there’s something about the specific pictures that I’m having issues with that I’m missing; about half of the images I’ve tried to upload have worked no problem, and I haven’t changed anything but the code I’m getting from the above website. I just haven’t been able to figure out what that difference is.

This isn’t something that can be debugged without seeing the actual code.

If you can post that within a “preformatted text” marker (select two blank lines, click the </> button in the editor, and then paste the code inside), then we can take a look at it.

Also, you shouldn’t be putting CSS within passages like that. The CSS belongs in your Stylesheet section.

Haha, I’m so new to this, I don’t even know what’s CSS and what isn’t. I’ve just been cobbling the results of my various Google searches together.

Well, the code is apparently way over the character limit for a post. The below picture is an example of what I’ve been uploading to https://www.base64-image.de/; from there, I’ve just been clicking Show Code, then copying the code from “For use in elements:”, then pasting it into my passage as <img src="code" alt="">.

Here’s an example of one that worked no problem using the same process:

Simply make a Twine sample which does nothing more than demonstrate the problem, publish it to HTML, then ZIP the file(s) and upload it at some temporary upload site (like SendGB; click the “link” icon in the lower-right). Then post the link here so we can take a look at it.

That said, why aren’t you simply putting the image together with the HTML file and displaying it that way? That’s a far better method than embedding it as a Base64 image.