在 Docusaurus 中更改图像大小

Question

我正在使用 Docusaurus 来制作文档。

我想将图像添加到 Markdown 文件中，并调整其大小以防止其大于所需的大小。

检查这个答案，我意识到使用 md 文件中的静态 html 内容是可能的，但由于图像是静态的docs/assets，<img>标签找不到它。

![Github](assets/github_logo.jpg)

无法调整大小，并且

![Github](assets/github_logo.jpg)

找不到资产。

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

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}} />