js-based-img-web-component.js

customElements.define(
  "custom-image",
  class extends HTMLElement {
    constructor() {
      this.imgEl = document.createElement("img");
      this.appendChild(this.imgEl);
    }

    connectedCallback() {
      this.render();
    }

    attributeChangeCallback(name, newValue, oldValue) {
      if (name === "uri" && newValue !== oldValue) {
        this.render();
      }
    }

    set mint(val) {
      this._mint = mint;
      this.render();
    }

    async render() {
      const uri = this.getAttribute("uri");

      const metaData = await getMetaData(uri);
      const imageData = await getLogo(this._mint, metaData);
      this.imgEl.setAttribute("src", imageData);
    }
  },
);