A picture is worth a thousand words, why not put one in your Snap?

[Montoya]

Introducing: support for images in Snaps UI. You heard that right, you can now embed images in custom UI with the image component, now available in MetaMask Flask / stable 11.4. Try it out right now with the Mystery Fox Snap in MetaMask Flask!

snaps_images_demo.mov

With the image component, you can insert an inline SVG or even nest an encoded PNG or JPG image inside an SVG. You can even use animated SVGs. You can try it out with the Snaps Simulator and generate example code. Here's example code for embedding a giant Ethereum logo:

import { image, panel } from '@metamask/snaps-ui';

const component = panel([
  image(
    '<svg viewBox="0 0 142 215" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:7"><path d="m1394.74 693.463-64.38-89.439v50.214l64.38 39.225Z" style="fill:#c8b2f5;stroke:#3441c0;stroke-width:2.27px" transform="matrix(1.08181 0 0 -1.03277 -1368.349 837.392)"/><path d="m1394.74 693.463-64.38-89.439v50.214l64.38 39.225Z" style="fill:#eecbc0;stroke:#3441c0;stroke-width:2.27px" transform="matrix(-1.08181 0 0 -1.03277 1510.05 837.392)"/><path d="m1398.61 639.614-69.66-30.973v70.608l69.66-39.635Z" style="fill:#87a9f0;stroke:#3441c0;stroke-width:2.4px" transform="matrix(-1 0 0 1 1399.8 -529.114)"/><path d="m1398.61 639.614-69.66-30.973v70.608l69.66-39.635Z" style="fill:#cab3f5;stroke:#3441c0;stroke-width:2.4px" transform="translate(-1258.104 -529.114)"/><path d="m1394.74 709.855-64.38-105.831v75.841l64.38 29.99Z" style="fill:#eecbc0;stroke:#3441c0;stroke-width:2.27px" transform="matrix(-1.08181 0 0 1.03277 1510.05 -622.619)"/><path d="m1394.74 709.855-64.38-105.831v75.841l64.38 29.99Z" style="fill:#b8fbf6;stroke:#3441c0;stroke-width:2.27px" transform="matrix(1.08181 0 0 1.03277 -1368.349 -622.619)"/></svg>',
  ),
]);

To use images in your Snaps, simply update your dependencies including @metamask/snaps-ui to the latest versions, make sure you are on version 11.4.x of MetaMask Flask, then use the image component with a valid SVG in any panel that supports custom UI. You can find examples with standard SVG, animated SVG, embedded PNG and embedded JPG in the source code for the Mystery Fox.

Have questions? Feel free to ask here!

[HenryQW]

Hey, any plans to support external images?

[Montoya]

We will revisit that at a later time. For now, you can use endowment:network-access to fetch an image, convert it to a base64 data blob, and embed that in an inline SVG.