1. 画像を表示してみよう

次は「Image」を表示する方法です。まずは，「Files」に画像をアップロードしてください。

この画像を指定するためには，「src」のプロパティを用います。右側には「プレイスホルダー」をつけてファイルを指定します（画像は小林先生のチュートリアルのリンゴの画像です。）。

次回に説明をする予定ですが，他で指定した変数により読み込む画像を変える場合に注意が必要になります。「src」以外のプロパティは他と共通のようです。

「src」の中でシングルクォーテーション（'）とダブルクォーテーション（"）が使われています。これは同時に２つを使うことができないためです（詳しくは「JavaScriptについて」を参照）。

// Image
// 以下は変更可能なプロパティのみ

  this.options.content.push({
    //共通プロパティ
    type: 'image', 
    left: 0,
    top: 0, 
    width:400, // circle, lineの場合，ここのみ指定 textでは変化しない
    height:250,
    fill:'rgb(255,0,0)',// nullまたは'red' 'rgb(X,X,X)'
    stroke:'black', // nullまたは'red' 'rgb(X,X,X)'
    strokeWidth:'10',
    angle: 0,

    // 独自プロパティ
    // 以下image関数
    src: '${ this.files["1.jpg"] }',
    
  })

実行すると以下のように画像が表示されます。