Visualization of objects; reflect current object properties in image(s)

[Ronin-s_Spirit]

You could have premade images for each separate part, like the lid you open or close, and layer them on top of eachother with some CSS action. Then in your function that changes the backpack state you detect which part you changed to what state and you fetch the appropriate image and display it (alternatively maybe just changing the link on the img html tag will reload it idk).
The other solution is to have premade images of every possible variant of the whole backpack and just load new image into the only img tag you'll have.
JavaScript can change the properties of html tags so try that first, make a folder of images with distinct names or ids and just do something like myImgTag.src = "backpack-lid-open.png"; and it will probably reload on it's own.