VSTS WIki 使用 HTML Img 标签答案

【问题标题】：VSTS WIki Using HTML Img TagVSTS WIki 使用 HTML Img 标签
【发布时间】：2018-08-07 19:12:25
【问题描述】：

因为我希望能够在 Markdown 中重新调整图像大小，所以我一直在使用 HTML img 并指定所需的宽度/高度。

我使用相对路径引用图像，例如，对于与图像文件夹在同一目录中的降价：

<img src="./Images/MyImage.png" width="600">

使用 Visual Studio Code 一切正常，但是当 markdown 被推送到 VSTS Wiki 时，它并没有呈现图像。

这是一个错误还是不支持img 标签？

【问题讨论】：

您是否通过以下答案解决了问题？有更新吗？
我确信这会起作用，但遗憾的是 Wiki 不支持标准语法。
嗯，Wiki当然支持标准的HTML语法，你的问题是在将md文件和图像推送到VSTS时，由于路径不正确，无法找到图像。详情见我的回答。

标签： azure-devops markdown

【解决方案1】：

您可以使用以下语法来调整它们的大小（请参阅末尾的 =WIDTHxHEIGHT）：

请注意，支持图像大小调整的语法仅在拉取请求和 Wiki 中受支持。

![Image alt text]($/project/folder/_img/markdown-guidance/image.png =WIDTHxHEIGHT)

因此，对于您的用例，我将使用（在您的降价文件中）：

![Image alt text](./Images/MyImage.png =600x)

markdown中的图片请参考以下文档。

https://docs.microsoft.com/en-us/vsts/project/wiki/markdown-guidance?view=vsts#images

【讨论】：

格式为![Image alt text](./Images/MyImage.png =600x800)或![Image alt text](./Images/MyImage.png =600x)，会根据比例自动调整HEIGHT。

【解决方案2】：

Wiki 当然支持标准的 HTML 语法。详情请见this blog。

问：使用 Visual Studio Code 一切正常，但是当降价被推送到 VSTS Wiki 它没有呈现图像。

根本原因是您使用了相对路径<img src="./Images/MyImage.png" width="600">，该图像可以在您的本地计算机上找到。因此，在本地 Visual Studio Code 中打开 markdown 文件时可以看到图像。

但是，当您推送到 VSTS 时，路径会发生变化。因此它无法在 Wiki 中找到用于渲染图像的图像。您需要捕获图片的链接地址（URL），然后使用img标签中的URL，如下所示：

<img src="https://xxx.visualstudio.com/f081441f-c072-4ed5-9407-85683e9b0888/_apis/git/repositories/e291904f-4668-4fba-8575-3f67898e3058/Items?path=%2Ftest%2F0116-workspace.png" width="600">

【讨论】：