I cannot, for the life of me, get images to display in my Twine game. I’m using Twine in my browser (as opposed to the app). Here’s what I’ve done:
Used the publish to file button to download my game as a my_game.html file.
Dragged and dropped that file into my project folder, e.g. my_project
Downloaded the image I want - e.g. boston.jpg - and added it to a folder named images in the my_project folder
In a passage in Twine, added the following code:
<img src="images/boston.jpg"/>
Ran my game - image is displayed as broken. Tried both with the Play and Test buttons - neither work.
Things I’ve tried:
Not sure if this is accurate but I read somewhere that images only display correctly for published games (not in the Twine editor). I published on itch.io by uploading a ZIP containing my index.html and images folder - didn’t work.
I tried referencing the entire file pathname, e.g.
<img src="Users/me/Documents/twine/my_game/images/boston.jpg"/>
that didn’t work
I checked for differences in upper/lower case between the Twine code and the file name. They match.
I tried hosting the image on Google Drive (with sharing set to “anyone with the link can view”) and copying the link into the Twine passage code - didn’t work
The only thing that’s worked is googling an image, right-clicking, opening that image in a new tab, and copying and pasting that URL into the Twine passage code. But I want to use my own images, not images ripped from Google.
One thing you can do to verify that the path is correct is to open the published file and right click on the broken image. Select INSPECT from the context menu. This will open a pane of the full HTML code. It should automatically highlight the <img> tag with the broken link. Look at the path that’s shown and verify that it’s images/boston.jpg
W3Schools does recommend putting a slash in front of relative linked folders, but I don’t do that and have never had a problem. I’m not on a Mac, but the browser inspector will reveal the actual code in the <img> tag and that should help you figure out what’s going on.
1: Create your custom folder & file structure.
eg. the my_project folder, that contains sub-folders like images, in which you store the project’s media files in.
my_project/
images/
boston.jpg
2: Add references to those media files to the Passages in which want them to appear or be played.
eg. add <img src="images/boston.jpg"> to a Passage to display the boston.jpg image.
3: Use the Publish to File option to save a copy of your current project as a Story HTML file into the ‘root’ folder of your custom structure.
eg. use that option to save a file named my_game.html into the folder named my_project
my_project/
my_game.html
images/
boston.jpg
4: Open the newly created Story HTML file in your web-browser.
eg. open the my_game.html file
5: Repeat steps 2 to 4 as often as you need to.
note: The HTML documents created by the Play and Test options can’t load media files that are referenced via a Relative URL. Because:
in the case of the Web-browser based release of Twine 2, those documents only exist in memory, so there is nothing for the referenced media file to be relative to.
in the case of the Installable based release of Twine 2, those documents are saved to the “temporary file” area of the Operating System the application is being run on. So again there is nothing for the referenced media file to be relative to.
Based on Greyelf’s answer below, I now know that the images appears broken because there’s nothing for referenced media file to be relative to. So the solution is to open my locally saved HTML story file into the web browser.