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

# TL;DR

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

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

# 画像サイズを変更する４つの方法
ここではGitリポジトリをWikiとして発行しているとします。

https://learn.microsoft.com/ja-jp/azure/devops/project/wiki/publish-repo-to-wiki?view=azure-devops&tabs=browser

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/6b653da2-cc3f-312f-8158-3347c3a960cc.png)

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

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

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

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

https://learn.microsoft.com/ja-jp/azure/devops/project/wiki/markdown-guidance?view=azure-devops#images

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/6e899f3e-cc5f-4a75-8d09-7cea1a3f31b9.png" width=49%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/fbc03709-e136-1eb4-a3dc-ecdb0a20d975.png" width=49%>

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

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/b03c529f-8534-074e-df3c-4f788165bf61.png" width=49%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/8c4662a3-e48a-7fb8-18ba-d4d55f3171ae.png" width=49%>


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/a012ea0e-49f1-10f2-28c2-3e22fa608ddd.png)

```md
例）
<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%>
```

https://stackoverflow.com/questions/54515154/adding-images-in-azure-devops-wiki

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/2c172742-e9b1-09ff-5dfd-3c5407fc8b48.png" width=49%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/1d8baf21-c8d0-75da-33ae-44b626ac9943.png" width=49%>


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

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

```md
<div style="width:80%">

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

<b><font color="green">DevOps、ローカルともに指定したサイズで表示できました</font></b>🎉

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/03314136-4105-217f-a280-b4ce400be7d4.png" width=49%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/19f19c4e-4e4c-fcc1-1889-1b6f447d3a9a.png" width=49%>

# まとめ

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

| 方法 | DevOps | ローカル |
|:-----------|:------------:|:------------:|
| `![Text](URL =WIDTHx)`       | 〇        | ✕         |
| `<img src="相対パス" width=WIDTH>`     | ✕      | 〇       |
| `<img src="BLOBの絶対パス" width=WIDTH>`       | 〇        | ✕         |
| `<div style="width: WIDTH">![Text](URL)</div>`         | 〇          | 〇           |

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