Image relative path

Question

I'm new to Twine.

I'm stuck using Twine SugarCube 2.21.0 and trying to include an image. I'm using the latest version of Twine 2.21.1

I've tried [img[entrance.jpg]] and [img["entrance.jpg"]] as in the SugarCube v2 Documentation - all that happens is the instruction appears as text.
I've tried standard HTML tags <img src="entrance.jpg" /> Nothing is displayed but if I include a height and width then I get an image placeholder but the image is not found.
If I use a web link then the image is displayed. The same is true if I use the full path to the image such as <img src="C:\Users\John\Documents\Twine\Stories\images\entrance.jpg" />
How can I get Twine to recognise relative images?

Answer 1

A Relative URL assumes that the referenced resource is stored relative to the HTML file it's being used in.

eg. If your HTML file is stored in your c:\my-stories folder then the entrance.jpg image file referenced in your [img[entrance.jpg]] or <img src="entrance.jpg" /> examples also needs to be stored in that folder.

Unfortunately the HTML document created by the Test and Play modes of the Twine 2.x application only exists in the memory being used by the application, so there is no physical HTML file for referenced image file to be stored relate to.

You can use the Publish to File option to create a physical HTML file which you can save in a folder that is relative to the location your image is stored in, this would allow you to test the story as it will be used by the end-users.

note: Your last example is trying to use an Absolute (Path) URL, which you would need to changes to something like the following for it to work within the Twine 2.x application.

<img src="file://C:/Users/John/Documents/Twine/Stories/images/entrance.jpg">

warning: Obviously the above Absolute URL will not work on other people's machines, so you will need to either:
1. change it to a Relative URL before creating a release of your project for others to use.
2. implement some means for your project to automatically switch between Absolue & Relative URLs as needed.

Comments

Thank you. I'll use the full pathname while I'm developing the game and then do a seach and replace before using Publish to file.

Am I correct in thinking the relative path name will then be 'file://images/entrance.jpg'? Adding that file:// will presumably avoid the error:
This page says
Apologies! A fatal error has occurred. Aborting.
Error: no valid storage adapters found. ...

which I was getting when I tried that.

---

The file:// part of the Absolute URL indicates to the web-browser which protocal to use to retreive the file, which in this case is from the local file system of your Operating System. It serves the same purpose as http:// protocal does when you reference a file stored on a server, except in that case it is indicating that the server is a web-server.

You don't need to specify the protocal when using a Relative URL because the web-browser will automatically used the same protocal that was used to access the HTML file.

eg. the Relative URL equivalent of my previous example would look like the following

<img src="images/entrance.jpg">

...assuming that your file & folder structure looked something like the following

story.html
images/
	entrance.jpg

 

Answer 2

I have some SugarCube sample code for images which shows various ways of dealing with relative and absolute file paths, so that you can see images in your code both while testing in Twine and with published HTML.  (Clicking "Jump to Start" in the UI bar also takes you to a menu of other sample code there.)

Anyways, that sample code should show you exactly how to get what you want working.  It's also written in SugarCube, so you could download that HTML along with the images the sample code uses, import that HTML into Twine, and see exactly how the code works.

Hope that helps!  :-)