在Docusaurus中更改图片大小

Question

我正在使用Docusaurus制作文档。

我想在Markdown文件中添加一个图像，并将其调整大小，以防止其变得比需要的大。

查看此答案，我意识到可以使用md文件中的静态html内容来实现，但由于图像是静态放置在docs/assets中的，<img>标签找不到它。

![Github](assets/github_logo.jpg)

不能调整大小，并且

<img src="assets/github_logo.jpg" width="200" />

无法找到该资产。

我很乐意得到任何解决方案。

- Mahdi-Malv

Answer 1

对于Docusaurus来说，由于它使用MDX，你可以导入你的资源。

import GitHubLogo from './assets/github_logo.jpg';

然后将其引用为图像来源。

<img src={GitHubLogo} width="200"/>

这对我来说非常有用，可以帮助我避免由于webpack导致的缓存问题。

另外，请注意宽度和高度，最新版本（2.1.0）具有覆盖宽度属性的CSS。

img {
  max-width: 100%;
}

我最后使用了内联样式。

<img src={GitHubLogo} style={{width: 200}} />

- Jackson Cupp

---

这个没用。 - intergallactic

对我来说效果很好！ - brismuth

对我来说效果很好！ - undefined

我最初在我的图片上覆盖了max-width属性，但这使它们在移动设备上看起来很糟糕。后来我发现，将max-height样式应用于我的图片反而给了我最好的效果。这样一来，无论是在桌面还是移动设备上，图片都能保持合适的大小。 - brismuth

通常情况下，图像是从/source/img/.../xxx.png导入的，实际上位于源代码库中的/static/img/.../xxx.png位置。 - Tom Yu

Answer 2

这与Docusaurus无关。Markdown语法不允许调整图像大小，您需要编写原始HTML，这也可以。

您的路径必须是绝对路径，并在其中包括前导/。如果您的baseUrl不是/，则还必须在路径中包含它。

- Yangshun Tay

---

请添加示例 - intergallactic