【Azure DevOps】Wikiで画像のサイズを変更するニッチな方法

TL;DR

Azure DevOpsのWikiでは基本的なMarkdown記法が使用でき、もちろん画像も挿入できます。
しかし画像のサイズを調整する場合、いくつか方法はあるもののWikiのGitリポジトリをDevOpsとローカルPC両方の環境で同じように表示できずいろいろ試行錯誤したので、その記録。

結論：<div style=""></div> で ![Text](URL) を囲む

画像サイズを変更する４つの方法

ここではGitリポジトリをWikiとして発行しているとします。

ドキュメントに画像を挿入するときはドラッグ＆ドロップで簡単にできます。このときは .attachment フォルダに画像がアップロードされ、Markdown形式で画像を参照します。

ここで画像のサイズを変更するには、以下のような４つの方法があります。

方法１） ![Text](URL =WIDTHx)

一つ目は公式のドキュメントに書かれている記法で、通常のMarkdownの画像URLの後に =WIDTHxHRIGHT (WIDTHとHEIGHTは数字。HEIGHTは省略可)を入れる方法です。

例）
![cat.jpg](/.attachments/cat.jpg =80%x)

ただし、これはAzure DevOps独自の記法らしく、ローカルPCのVS Codeなどでプレビューを見ても正しく表示されません。

方法２）<img src="相対パス" width=WIDTH>

Wikiでは一部のHTMLタグも使用できます。そこで、imgタグのstyle属性でサイズを指定したらどうでしょうか。画像のパスは .attachment フォルダ内の画像への相対パスで書いてみます。

例）
<img src=".attachments/cat.jpg" width=80%>

するとローカルPCでVS Codeなどでプレビューでは正常に表示されました。しかし、次はAzure DevOpsで表示されなくなりました。（なんで）

方法３）<img src="BLOBの絶対パス" width=WIDTH>

少し調べてみると、Azure DevOpsにアップロードした画像のBLOBパス（絶対パス）が分かるそうです。これならどうでしょう。

例）
<img src="https://dev.azure.com/ORGANIZATION_NAME/00000000-1234-5678-9012-0000000000/_apis/git/repositories/xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/Items?path=/.attachments/cat.jpg&download=false&resolveLfs=true&%24format=octetStream&api-version=5.0-preview.1&sanitize=true&versionDescriptor.version=main" width=80%>

方法２と同様にimgタグのstyle属性でサイズを指定したまま、画像のパスを絶対パスに置き換えると、Azure DevOps上では正常に表示されるようになりました。
勘のいい方はここで薄々お気づきでしょうが、BLOBのパスはローカルPCのVS Codeなどでプレビューでは表示することができません。

方法４）<div style="width: WIDTH">![Text](URL)</div>

せっかくWikiに書いているのでAzure DevOps上に表示されないと意味がありません。ローカルでのプレビューを半ば諦めていたところ、ふとdivタグでMarkdownの画像記法を囲ったらどうなるの？と気になり、試してみたところ...

<div style="width:80%">

![cat.jpg](/.attachments/cat.jpg)
</div>

DevOps、ローカルともに指定したサイズで表示できました🎉

まとめ

あまりスマートではないですが、これで目的だったDevOpsでもローカルでも画像のサイズを変更してプレビュー出来ました。

方法	DevOps	ローカル
	〇	✕
<img src="相対パス" width=WIDTH>	✕	〇
<img src="BLOBの絶対パス" width=WIDTH>	〇	✕
<div style="width: WIDTH"></div>	〇	〇

以上、超ニッチな小ネタでした。