Claude 3 のArtifactsでReactのアプリを作ったときに、画像を表示する

Claude 3 のArtifactsはすごく簡単にReactアプリを作成できるが、見た目の装飾だと、lucide-reactでアイコンを表示したりするくらい

仮にimgタグに直接URLを指定しても、CSPによって表示できない。

developer.mozilla.org

ただし、SafariとかのWebKitベースのブラウザだと表示できるらしい。

Gnome Web(epiphany)とかいい感じだった。

wiki.archlinux.jp

具体的手順

前提

SafariやWebKitベースのブラウザを使う

手順

1. 必要な画像をどこからでもアクセスできるpublicな場所に置く（自分はImgurで画像をアップロードしてpublicにしている）
2. Calude 3でReactのアプリを作るプロンプトを実行。この際、使う画像のURLを指定

備考

Imgurを使う場合、右クリックから画像本体のURLをコピーする必要がある。imgurのページURLだと画像じゃないし。

注意

再検証したら、Chromeとかでうまくいかなかったので、WebKitを使うように記事を書き直した