Twine Version: 2.7.1
Harlowe Version: 3.3.7
Operating system: MacOS
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:
- 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.
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.
Any help would be much appreciated. Many thanks.
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
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.
Let us know what the inspector shows.
I believe the order of your actions is the issue.
The normal sequence of steps would be:
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.
2: Add references to those media files to the Passages in which want them to appear or be played.
<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
4: Open the newly created Story HTML file in your web-browser.
eg. open the
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.
Thank you! Inspector shows:
<img src="images/boston.jpg" data-raw="">
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.
This worked! Thank you Greyelf, particularly for the explainer on why media files can’t be shown using play or test. Much appreciated.