Mardown textarea に画像をアップロードしたとき、画像は Markdown 記法はではなく素のHTMLタグで、width と height と loading=”lazy” がついた状態で書き出されたい。

[machida]

現在は

![piyo](./images.jpg)

こうなるが、

<img src="./images.jpg" width="100" height="100" loading="lazy" decoding="async" alt=”piyo”>

こうしたい。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[goruchanchan]

@komagata @machida
お疲れ様です🙇‍♂️バグ混入申し訳ないです🙇‍♂️
現状確認をしたところ、プロダクト環境にアップロードした画像のリンクにてバグが発生しているようでした🙇‍♂️

対策としては、machida さんが展開くださった『ダブルクォートでくくる』を導入しようと思いますが、いかがでしょうか？
また、属性については、width="", height="" のようにしようかと思っていますが、こちらはいかがでしょうか？

<!-- 記述例 -->
<img src="./image.png" width="" height="" loading="lazy" decoding="async" alt="image.png">

[machida]

@goruchanchan
画像のwidth と height の値を取得し、その値を入れるようにしていただきたいです。
例えば、幅120000px * 高さ68000px の画像だったら、その値をそのままwidth、heightに指定するという形です。

lazyを指定することで、その部分までスクロールして画面に入ってから画像のローディングが始まります。しかし、画像の読み込み前の段階で、その部分の高さを確保しないと、読み込んだ後と前でレイアウトのずれが出てしまいます。レイアウトシフトというやつです。それを発生させないために、画像のサイズをimgタグに持たせます。

参考:
https://www.doe.co.jp/hp-tips/lazyload-setting-width-height/

画像のサイズを取得するのは難しいと思うので、ポイントの振り直しが必要な場合は言ってくださいー。

[goruchanchan]

@komagata こちらの対応ですが、textarea-markdown npm に対応を入れる方針で良いでしょうか？

[goruchanchan]

@komagata こちらの対応ですが、textarea-markdown npm に対応を入れる方針で良いでしょうか？

プレースホルダーか、オプションにて設定できるようにする

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[goruchanchan]

本番環境にて動作確認できましたのでクローズいたします🙇‍♂️

[machida]

@goruchanchan

画像をクリックすると別タブで画像が表示されるという機能がなくなってしまっていました（拡大表示が必要なときはクリックをして別タブで見ます）。
別タブで画像を表示する機能を追加できますでしょうか？

<a href="{画像のURL}" target="_blank" rel="noopener noreferrer"><img src="{画像のURL}" width="xxxx" height="xxxx" alt="{画像のファイル名}"></a>

このようにしていただきたいです。

[goruchanchan]

本番環境にて動作確認できましたのでクローズいたします🙇‍♂️