​
Imagem

Imagens são a forma mais comum de adicionar conteúdo visual à sua documentação.

​
Noções básicas

A markdown syntax permite que você adicione imagens usando o seguinte código

![title](/path/image.jpg)

Para garantir que as imagens sejam exibidas corretamente em produção, adicione uma barra no início do caminho da imagem (por exemplo, /path/image.jpg).

Note que o tamanho do arquivo de imagem deve ser menor que 20MB. Caso contrário, recomendamos hospedar em um provedor de CDN como S3, Cloudinary ou um serviço similar.

​
Incorporações

Para obter mais personalização com imagens, você também pode usar incorporações para adicionar imagens.

<img height="200" src="/path/image.jpg" />

​
Desativar Zoom da Imagem

Para desativar o zoom padrão ao clicar nas imagens, adicione a propriedade noZoom às incorporações de imagem.

<img height="200" noZoom src="/path/image.jpg" />

​
Vinculando Imagens

Para vincular uma imagem, por exemplo, para criar um botão em seus documentos, envolva a imagem em um link com a noZoom propriedade. Imagens em a tags terão automaticamente um cursor de ponteiro.

<a href="https://mintlify.com" target="_blank">
  <img height="200" noZoom src="/path/image.jpg" />
</a>

​
Modo Escuro

Para usar imagens separadas para os modos claro e escuro, use Tailwind CSS para ocultar e mostrar imagens.

<img className="block dark:hidden" src="/path/image-light.jpg" />
<img className="hidden dark:block" src="/path/image-dark.jpg" />

​
Relacionados

Para mais informações, recomendamos as seguintes seções:

Frame Component Reference

Leia a referência para o componente Frame

​
Vídeos


Mintlify suporta HTML tags in Markdown. Isso é útil se você preferir tags HTML à sintaxe Markdown, e permite criar documentação com flexibilidade infinita.

Para vídeos do YouTube, use:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Para outros vídeos, use:

<video
  controls
  className="w-full aspect-video"
  src="link-to-your-video.com"
></video>

Para reproduzir o vídeo automaticamente, use:

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video"
  src="link-to-your-video.com"
></video>

Como o Mintlify precisa aderir à sintaxe JSX, atributos de duas palavras precisarão ser escritos em camelCase: autoPlay, playsInline.

​
iFrames

Carrega outra página HTML dentro do documento.

<iframe src="https://www.youtube.com/embed/4KzFe50RQkQ"> </iframe>