1. Import the store from PodOS, prefer it to the Sol-Component store, import the data-from-query attribute.
<![CDATA[<script src="../component-interop.js"
data-stage="auto"
data-manifest="sol-components.manifest.json pod-os.manifest.json"
data-components="@pod-os/elements"
<b>data-objects="store:pod-os"</b>
<b>data-attributes="data-from-query"</b>
></script>]]>
2. Use Sol-Components' data-from-query attribute in an img tag - it will listen for changes to the store based on its pattern attribute.
<![CDATA[<img data-from-query pattern="urn:currentPerson urn:hasPhoto ?url">]]>
3. Write a script to be activated on button clicks that edits the CurrentPerson record in the store
<![CDATA[<script type="module">
const rdf = window.ComponentInterop.services.get('rdf');
const person = rdf.sym('urn:currentPerson');
const photo = rdf.sym('urn:hasPhoto');
document.querySelectorAll('.person-pick').forEach((btn) =>
btn.addEventListener('click', () => {
rdf.store.statementsMatching(person, photo, null)
.forEach((st) => rdf.store.remove(st)); // drop the old photo
rdf.store.add(person, photo, rdf.sym(btn.value), person.doc()); // write the chosen one
}));
</script>]]>