How do I add an image of a png on my desktop into one of the passages of a Twine Adventure Game?

Hello I am making a Twine 2 adventure game and I want to add an image of a bush png on my desktop into one of the passages. Here is my example code in Harlowe 3.10,

src = “TestBush.png”>

I put the png in the folder with my twine file, however the bush is still not visible

Is there an error in this code?

1 Like

Please use the toolbar’s Preformatted text option when adding source code to your comments. Also there should be no space characters between the name of a HTML element attribute and its String value, so I will assume your <img> element looks something like.

<img src="TestBush.png" alt="image of a bush">

When you say “with my twine file” do you mean the Story HTML file you generated using the application’s Publish to File option? or do you mean some other “twine file”?

Does the file-name of the PNG file have the same letter casing as the URL?
eg. is the file actually named TestBush.png

note: Most Operating Systems are case-sensitive when it comes to the naming of files so many web-developers use a single letter-casing when naming files being referenced in URLs, and often that casing will be all lower-case. And because most punctuation characters (like space) need to be HTML encoded when used within file names being referenced in URL many wed-developers also limit the usages of such characters to just the standard underscore and standard dash (minus sign). Based on this your example filename could be changed to either…

<img src="test-bush.png" alt="image of a bush">
<img src="test_bush.png" alt="image of a bush">

That worked! It is the story html file I generated with the publish to file option.

The image still did not appear though the the alt description did. I used Base64 Image encoding and the image became visible when the file was run. I will make sure to use the formatted text option next time. Thank you for the help. Also thank you for the tips as well. :slight_smile:

1 Like