CodePenをサイトに埋め込んだ時、画像が表示されない件について。

技術系のブログ書いている方（特にフロント側とか）は結構 CodePen を使ってらっしゃる方が多いと思うのですが、CodePen いじってる最中に少しめんどくさいことが起きたので備忘録として書こうと思います。

ファイル名に気をつけて

この記事を書いているときに、画像を表示させたくて CodePen を触っていたら codepen のサイトでは問題なく表示されているのに、いざ記事に埋め込んだら表示されない。アラート文読んでみたらクロスドメインが〜って出るから「当たり前だろそんなのiframeなんだから」と思いつつ原因を探してたら、どうやら画像ファイルの名前が問題だったみたいです。画像ファイル名に数字が含まれていると、埋め込んだ際にファイル名から数字がなくなった状態で表示されてしまうようです。例えば、

• sushi01
• 21sushi

とか。

なので、ファイル名には数字を入れないようにしましょう。屁理屈っぽいですが（そんなことありません！）、じゃあハイフンで区切って数字…！とかもダメでしたので、とにかく画像ファイル名に数字はダメらしいです。CodePen だけなのかな〜このバグ。それとも僕だけなのかな。