Framer XのCode Componentでローカルの画像を呼ぶ方法

React ComponentをGUI上のコンポーネント = Code Componetとして表示できるFramer X。
そのFramer XのCode Componetからローカルの（プロジェクトディレクトリに置いている）画像ファイルにどうアクセスするか公式のSlack#framer-xチャンネルで質問して教えてもらえたのでメモを残しておきます。

画像ファイルの置く場所

画像ファイルは以下ディレクトリに配置します。

+ FramerXのプロジェクトディレクトリ
    + container
        + code
            - Hoge.tsx
        + design
            + assets
                - horse.png

この design/assets 以下に置くと http://127.0.0.1:4567/design/asstes/image.png でアクセスできるようになります。

Code Componentからの参照の仕方

以下は Hoge.tsxのコードです。

Hoge.tsx

import * as React from "react";
import { PropertyControls, ControlType, } from "framer";

interface Props {
  image?: string;
}

const defaultImage = 'http://127.0.0.1:4567/design/assets/horse.jpg'

export class Hoge extends React.Component<Props> {
  static defaultProps: Props = {
    image: 'http://127.0.0.1:4567/design/assets/horse.jpg',
  }
  static propertyControls: PropertyControls = {
    imagefile: {
      type: ControlType.Image,
      title: "Choose Image File",
    },
  }

  render() {
    return (
      <div>
        <h2>default image</h2>
        <img src={defaultImage} width={200} height={200} />

        <h2>props image</h2>
        <img src={this.props.image} width={200} height={200} />
      </div>
    )

  }
}

• defaultImage はFramer Xのインスペクタで画像を任意選択しない場合の指定の方法
• props.imageはFrmaer Xのインスペクタで画像を任意選択できる場合の指定方法
  • デフォルトの画像が不要の場合は defaultProps は不要です

Framer X上の表示

Framer XのPreviewモードでの表示

Framer App(Mobile, iOS)での表示

何もでない…

と、結局Framer Appで出ない（WiFiは同じ所に接続してますが…）という結果なので実機検証できないプロトタイピングは意味ないわけですが…　当然画像をリモートに置けばでます。

Hoge.tsx

import * as React from "react";
import { PropertyControls, ControlType, } from "framer";

interface Props {
  image?: string;
}

const defaultImage = 'https://scontent-nrt1-1.cdninstagram.com/vp/9e0e8228203ef044c5df2be70fa80d36/5C56B0CF/t51.2885-15/e35/41381170_704999723191120_6293607066180249889_n.jpg'

export class Hoge extends React.Component<Props> {
  static defaultProps: Props = {
    image: 'http://127.0.0.1:4567/design/assets/horse.jpg',
  }
  static propertyControls: PropertyControls = {
    imagefile: {
      type: ControlType.Image,
      title: "Choose Image File",
    },
  }

  render() {
    return (
      <div>
        <h2>default image</h2>
        <img src={defaultImage} width={200} height={200} />

        <h2>props image</h2>
        <img src={this.props.image} width={200} height={200} />
      </div>
    )

  }
}