Adding static images to a JDD component

kuba-orlik · 29 February 2024 13:02

As per @FilipI’s notes from this post, I’ve added support for importing static assets (SVG, PNG, JPG) from within TS(X).

Here’s how to use that.

Put your image next to the component’s tsx file, like so:
```
- my-component.jdd.tsx
- logo.svg
```
Import it using the normal import syntax:
```
import logo from "./logo.svg";
```
Then, use it wihtin the component’s toHTML function:
```
<img src={logo.url} />
```
You can also get the file’s content using logo.getContent() or its base64 form with logo.getBase64()

Here’s an example that uses all of those features:

  toHTML(): FlatTemplatable {
    return (
      <div class="nice-box">
        Code begins with:
        <pre>
          <code>
            {logo
              .getContent()
              .then((s) => s.replaceAll("<", "&lt;").slice(0, 40))}
          </code>
        </pre>
        Base64 sample:
        <pre>
          <code>{logo.getBase64().then((s) => s.slice(0, 40))}</code>
        </pre>
        <br />
        Preview:
        <br />
        <img src={logo.url} />
      </div>
    );
  }