画像の表示って、

画像をブラウザで表示しますよ。
そんなの、、<img>タグでしょって、いやいや。
ここでは<image>で埋め込む方法でやりますよ。
そう、SVGですね。

ここへきて、RICHな表示としてはSVGっていうのが、最近の私の選択です。
もちろん、こっちが専門ってのもあるからなんですけどね。
マスクとかを複雑にやりたいときって、canvasとかだと、、いろいろツラいんで。
では、そもそもSVGって何かの説明をするわけではないけれど、
データがどのようにできているかを見てみましょう。

普段はInkscapeとか使わないけれど。

仕事柄、普段はイラレなんですよね。
AIです。
人工知能ではないですよ(o^^o)

でも、専門で無いと持ってないと思うんで、Inkscapeにしときましょう。
まず、新規作成で画像をひとつ貼ってみましょう。

ドロップしたらこんなのでるので、【埋め込み】にします。

表示されました。特に何も操作しないで良いです。

では、保存しましょう。
ファイルの種類は、【プレーンSVG】にしときましょう。
で、ファイルの内容のimage部分はこれです。

<image
   width="62.08889"
   height="62.794441"
   preserveAspectRatio="none"
   xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB
AQEBAQICAQECAQEBAgICAgICAgICAQICAgICAgICAgL/2wBDAQEBAQEBAQEBAQECAQEBAgICAgIC
～～途中略～～
KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q==
"
   id="image3732"
   x="77.812706"
   y="115.16826" />
  </g>
</svg>

普通に、image/jpegのbase64がいますね。
こんなもんです。
このSVGをブラウザにドロップすると、こんなんです。

ってことで、これを動的にやれば良いっていうそれだけです。
まぁ早い話、

だから最初からbase64だった

ってことなんですけどね。

実際に画像を表示する方法

実際には、まだcodeかいてないですけど、、、

●WebSocketでjavascriptでPUSHされてくる➡あらかじめ準備した場所（タグ）の xlink:hrefを書き換える

っていう、それだけです。
その画面には、そもそも、実行させるためのボタンもあったりするっていう、そういう感じです。