Images won't show in Twine Online

Question

Hi, I'm using the online version of Twine and can't seem to get images to work. (I'm not proficient in HTML - I just used their recommended tag. 

<img src="the URL of your image" width="500" height="300" alt="Two foxes">

I replaced "the URL of your image" with my desired URL. Didn't work, so I tested it with a random google image. Didn't work. I can see where it is supposed to have gone - it just never loads - the tiny "image" symbol shows up without the actual photo. 

Lots of answers discuss directory issues, but I assumed if mine is being hosted online, it isn't a directory issue?

Answer 1

You didn't give an example of the URL you replace the "the URL of your image" String with, which makes it difficult to determine why it didn't work.

URLs can be devided into two main categories:

A. Relative.

These URLs are used to reference an external media file that is being stored in a location that is relative to the location of the HTML file that wants to access it.

Ex 1: If you had a local folder & file structure like the following, into which you have saved the HTML file (adventure.html) you generated via the Twine 2.x application's Publish to File option.

C:\adventure
	adventure.html
	\images
		forest.png
		desert.png

... then to show the forest.png image you would use a Relative URL like the following.

<img src="images/forest.png" width="500" height="300" alt="Forest">

Ex 2: If the web-server you are hosting the above adventure.html file on has a folder & file structure like the following

www.mysite.com
	adventure.html
	\images
		forest.png
		desert.png

...then you could use the same Relative URL as the above Ex 1 to reference the forest.png image.

B. Absolute.

These URLs are used to reference an external media file that is being stored in a location that is not relative to the location of the HTML file that wants to access it. This other location is likely to be an external web-server or file-server.

Ex 3. If you are using the Twine 2.x application's Test or Play options to view your story, and the images are being hosted on a web-server with the following folder & file structure.

www.mysite.com
	\images
		forest.png
		desert.png

... then to show the forest.png image you would use an Absolute URL like the following.

<img src="http://www.mysite.com/images/forest.png" width="500" height="300" alt="Forest">

Ex 4.If the (published) adventure.html file was being hosted on one web-server (like philome.la) and the external images were being hosted on a different web-server or file-server (like www.mysite.com), then the Absolute URL you would use to show the forest.png image would look the same as that in Ex 3.

Comments

Also, generally speaking, you don't want to set both the width and the height of an image at the same time, as this risks screwing up the image's aspect ratio (i.e. you can end up with a squashed or stretched image).  You usually only need to set the width, since you can scroll the image if it's tall.

You might also want to use "max-width" and/or "max-height" instead, if you want to prevent them from going outside of certain bounds.  You can use both of these at the same time, as they won't affect the aspect ratio.

Anyways, if you're interested, I have some sample code here which may help if you're trying to learn how to work with images in Twine/SugarCube.

Hope that helps!  :-)