0 votes
by (180 points)
<img src="ttps://pixabay.com/images/id-389907/" width="250" height="250">

I am a total Twine newbie working on my very first story in Sugarcube. I have never done anything like this before. (I am also working on a Mac for the first time after 25+ years on a PC, so I'm losing my mind.) When I try to insert an image using the code above, it does not work. I have published the story to HTML to test it, and all that shows up is a tiny icon indicating an image inside of a bigger white outlined square. Can someone please tell me what I am doing wrong? Thanks.

2 Answers

0 votes
by (159k points)

There are two issues with the coed example you supplied, both related with the URL you assigned to the HTML img element's src attribute.

1. The URL's protocol is missing a h at the start of the https:// reference.

2. The URL references a web-page that has embedded within it an image of a maginfing glass looking at a page of a book. The URL for that image is actually

https://cdn.pixabay.com/photo/2014/07/11/14/41/grammar-389907_960_720.jpg


So your HTML img element should look more like the following.
(untested)

<img src="https://cdn.pixabay.com/photo/2014/07/11/14/41/grammar-389907_960_720.jpg" width="250" height="250">

 

by (180 points)
Thank you! May I ask where you found the correct URL? I was hoping to use a few more images from Pixabay.
by (44.7k points)
If you right-click on the image on the page and choose "Copy Image Location", then it should copy the direct path to the image to the clipboard so you can paste it in elsewhere.
0 votes
by (44.7k points)

Generally speaking, it's not recommended that you link to files on sites you don't run or don't specifically allow it.  This is called "hot linking", and if the site decides to block hot linking, goes down, or the person playing your game just isn't connected to the Internet, then they won't be able to see the images.

So I'd recommend including all of the images with the HTML file.

Also, if you need help with images, I have some image sample code which may help.  (Click "Jump to Start" on the UI bar to see other sample code there as well.

Hope that helps!  :-)

by (180 points)
Thank you so much. I appreciate the advice and the link to the image sample codes. However, that appears to be way too advanced for me right now. I have never coded and am working from a Mac laptop for the first time after using a PC for 25 years. I don't even know how to create a folder on this thing yet! I am going to keep the link, though, for the future! I appreciate it.
...