Need help using a variable in the <img src> path

Authoring Twine
,
1

using Tweego with Sugarcube 2.37.3

I’m trying to use a variable to represent part of a path to an image. I’ve added a setup variable setup.imgs79 and assigned it the string "./assets/images/tut-less-7-9/". This is the directory where I store images for tutorials 7 through 9, in a series I’m writing to help myself learn Twine.

Then, in a passage where I want to specify an image path, I’ve written:

<img src="${setup.imgs79}box.png">

I must not have the syntax correct. The actual image I’m targeting, relative to the location of my compiled index.html file, is:

./assets/images/tut-less-7-9/box.png

When I inspect in Chrome, I see that my expression == 0, which I take to mean, “we didn’t find an image here”…

2

Attribute Directive markup is need if you want to assign an expression to an attribute of a HTML element.

<img @src="setup.imgs79 + 'box.png'">

note: if the assets folder is a child of the folder the HTML file is located in then there is no need for the ./ at the start of your file-path.
eg. both of the following reference the same Relative URL based file.

./assets/images/tut-less-7-9/box.png

assets/images/tut-less-7-9/box.png
1 Like
3

Thanks, Greyelf. Very helpful!