Troubleshooting image path for online Twine test playing

Authoring Twine
1

Hello all!
(SugarCube 2.30)
I’m using HiEv’s code for displaying images, but only getting a broken image link when I test run it on Twine online.
Here’s what I have at the top of my JavaScript:

if (window.hasOwnProperty("storyFormat") || document.location.href.toLowerCase().includes("/temp/")) {
	setup.Path = "/home/lauser/Documents/Patrick/Projects/Miscellany/CarlaBDay2019/APilferingPucksProblem/";  
} else { 
	setup.Path = "";  
}
setup.ImagePath = setup.Path + "images/";
setup.SoundPath = setup.Path + "sounds/";

I know I have the right path, as I opened the image in the browser and pasted the relevant portion of the path into the JavaScript. I tried C: at the beginning, an extra slash, nothing, “file://”, and none of that worked. Could it be “/temp/” that is the problem? HiEv said:

If you’re not working on Windows, and you’re using Twine v2.3.2+, then you’ll likely need to change "/temp/" to part of the default URL path that Twine uses to open your story.

I’m using Ubuntu Linux. I tried putting /home/ or /Documents/ instead of /temp/, but I’m probably misunderstanding the instructions.

Thanks in advance!

2

You should first make sure that the path you gave it actually works, just in case the problem is there somewhere. Just temporarily change the code a bit so that it always uses that path, just to make sure it actually works.

Once you’re sure the path works, then take a look at the URL that shows in your browser when you play the story from Twine. You’ll want to use a part of that URL (that you wouldn’t normally see in a URL) in place of the “/temp/” part.

That should do the trick! :slight_smile:

3

I don’t know how to change the code, but if I drag the image from my filesystem into a browser tab, then copy and paste what is in the url bar into [img[image.url]], it still shows a broken image link icon (even though the image displays fine when I drag it into a tab). Don’t I need to put something different from “file://” at the beginning?

What I normally wouldn’t see in a url - would that be the string of letters and numbers between /stories/ and /play?

4

Unfortunately, you aren’t giving enough information about what you’re seeing or trying to help you debug the problem, and I don’t have access to a Mac. Please provide the following information:

  1. When you drag an image to your browser, what is the full URL to that image it gives you?
  2. What is the exact code you then put into Twine to view that image?
  3. When you then play that Twine story, are you seeing any errors in the console window? If so, what errors?
  4. If you inspect the broken image using “Inspect element” in your browser, what path is it showing that it’s trying to use to display the image?
  5. When you play that story from Twine, what is an example of the URL it shows in your browser for that story?

Once you’ve provided that info then we can see a bit better what’s going on so we can help you solve it.

5

Here you go:

  1. file:///home/lauser/Documents/Patrick/Projects/Miscellany/CarlaBDay2019/APilferingPucksProblem/images/NaNo-2019-Winner-Web-Badge.jpg
  2. [img[file:///home/lauser/Documents/Patrick/Projects/Miscellany/CarlaBDay2019/APilferingPucksProblem/images/NaNo-2019-Winner-Web-Badge.jpg]]
  3. Failed to load resource: the server responded with a status of 404 (Not Found)
    /2/#!/stories/81473bda-b139-4be4-83ef-4e03b7ce150f/play:1
    Not allowed to load local resource: file:///home/lauser/Documents/Patrick/Projects/Miscellany/CarlaBDay2019/APilferingPucksProblem/images/NaNo-2019-Winner-Web-Badge.jpg
  4. file:///home/lauser/Documents/Patrick/Projects/Miscellany/CarlaBDay2019/APilferingPucksProblem/images/NaNo-2019-Winner-Web-Badge.jpg
  5. http://twinery.org/2/#!/stories/81473bda-b139-4be4-83ef-4e03b7ce150f/play

I hope this all is actually what you asked for! :slight_smile:

6

@PatrickLauser
You are trying to load a locally stored image from a temporary story HTML document generated by the online copy of the Web-browser based release of the Twine 2.x application. There are web-browser security related reasons why that won’t work.

If you were using the downloadable & locally run variation of Web-browser based release then those security restrictions would not apply.

7

Ah. OK, sorry, I assumed you were using the offline version.

Yeah, like Greyelf said, if you’re using the online version, then your resources are going to have to be online as well. If you want to work with local resources then you should use the offline version.

This is due to browser security reasons, which attempt to prevent online web pages from stealing data off people’s computers. That’s why you got that “Not allowed to load local resource:” error. Even if you used a file input element, which allows you to select a local file, it changes it to something like “blob:null/777a8092-d8da-4434-9d23-3f16e1c388c7”.

Anyways, you might want to use the offline version if you want to work with local files.

8

I just put everything onto the offline version, but it’s still coming back with the broken image link icon, with this error:
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

At least it’s a different error!

This is what I put in the offline version:

if (window.hasOwnProperty("storyFormat") || document.location.href.toLowerCase().includes("/tmp/")) {
	setup.Path = "C:/home/lauser/Documents/Patrick/Projects/Miscellany/CarlaBDay2019/APilferingPucksProblem/";  
} else { 
	setup.Path = "";  
}
setup.ImagePath = setup.Path + "images/";
setup.SoundPath = setup.Path + "sounds/";

[img[setup.ImagePath+'NaNo-2019-Winner-Web-Badge.jpg']]
9

That’s because Mac doesn’t have a “C:” drive. Get rid of the “C:” part.

Also, when you play that story from the offline version of Twine, what is an example of the URL it shows in your browser for that story?

10

Now it works! I had already tried putting nothing at the start in the online version, forgot to try again.

Oh yes, here it is:
file:///tmp/53dc4289-15a3-4f1b-9a22-32170ce04565.html

As you can see, I changed temp to tmp when I saw that, so I’m guessing that’s another reason it works now?

11

Yup. Looks good!

12

Thanks! Sorry for all the fiasco! :sweat_smile: