Adding image to array

Authoring Twine
1

I have problem with adding pictures to array.

:: Inventory
Here is what we have in stock:
<<for _item range $inventory>>
    <<if not _item.owned>>
        <<capture _item>>
        <<button _item.name + " - Buy for " + _item.price + " coins">>
            <<set $itemId to _item.id>>
            <<set _image to _item.image>>
            <<run alert("Before going to Buy Clothing, setting item ID to " + $itemId)>>
            <<goto "Buy Clothing">>
        <</button>><br>
        Category: <<print _item.category>><br>
        <img src="images/<<print _item.image>>" style="width:100px;height:100px;"><br><br>
        <</capture>>
    <<else>>
        <<capture _item>>
        <<button "Wear " + _item.name>>
            <<set $itemId to _item.id>>
            <<goto "Wear Clothing">>
        <</button>> - Currently wearing: <<print $currentOutfit[_item.category] is _item.id ? "Yes" : "No">><br>
        <img src="images/<<print _item.image>>" style="width:100px;height:100px;"><br><br>
        <</capture>>
    <</if>>
<</for>>

StoryInit
<<set $money = 100>>
<<set $inventory = [
    {id: "shirt",
    name: "Cool Shirt",
    price: 25,
    owned: false,
    category: "torso",
    image: "shirt.jpg"},
    
    {id: "pants",
    name: "Stylish Pants",
    price: 40, owned: false,
    category: "legs",
    image: "shirt.jpg"},
    
    {id: "hat",
    name: "Fancy Hat",
    price: 15,
    owned: false,
    category: "head",
    image: "shirt.jpg"}
]>>
<<set $currentOutfit = {head: null, torso: null, legs: null}>>

no matter what variable corresponding to the photo I enter in “src=” it does not work.
Can somebody help me with this?

2

The correct way to use to assign the value of a variable (aka an expression) to the attribute of a HTML element in a Passage is to use Attribute Directive markup.

<img @src="'images/' + _item.image" style="width:100px; height:100px;">

Some suggestions regarding your code:
1: Backquotes need to be used when using an expression as a macro argument.
eg. this <<button> macro call…

<<button _item.name + " - Buy for " + _item.price + " coins">>

…should be…

<<button `_item.name + " - Buy for " + _item.price + " coins"`>>

…so that the _item.name + " - Buy for " + _item.price + " coins" expression is evaluated first, and the result passed as an argument to the macro.

2:. The <<button>> macro supports supplying a Target Passage Name as an argument, so a <<goto>> macro should not need to be used.
eg.

<<button `_item.name + " - Buy for " + _item.price + " coins"` "Buy Clothing">>
    <<set $itemId to _item.id>>
    <<set _image to _item.image>>
    <<run alert("Before going to Buy Clothing, setting item ID to " + $itemId)>>
<</button>>

3: Code that is executed outside the body of an interactive element doesn’t need to be inside a <<capture>> macro call.

Currently you have lines like the following…

Category: <<print _item.category>><br>
<img @src="`images/` + _item.image" style="width:100px;height:100px;"><br><br>

,inside a <<capture>> macro.

But those lines aren’t part of the interactive <<button>> so they are being executed with the Passage is processed instead of when the end-user interacts with the button.

So there is no need for those lines to be within the <<capture>>, and that section of code should be written thus…

<<capture _item>>
    <<button `_item.name + " - Buy for " + _item.price + " coins"` "Buy Clothing">>
        <<set $itemId to _item.id>>
        <<set _image to _item.image>>
        <<run alert("Before going to Buy Clothing, setting item ID to " + $itemId)>>
    <</button>>
<</capture>>
<br>
Category: <<print _item.category>><br>
<img @src="'images/' + _item.image" style="width:100px; height:100px;">
<br><br>
2 Likes
3

Thank you so much! Everything works perfectly!

1 Like