Adicione imagens, incorpore vídeos e inclua conteúdo interativo com iframes na sua documentação. Todos os recursos estáticos no seu repositório de docs são disponibilizados automaticamente no caminho apropriado do seu domínio. Por exemplo, se você tiver /images/my-logo.png no seu repositório, a imagem estará disponível em https://docs.yoursite.com/images/my-logo.png.
Fotografia de uma paisagem com flores roxas em primeiro plano, montanhas ao fundo e um céu azul com nuvens esparsas.

​
Imagens

Adicione imagens para oferecer contexto visual, ilustrar exemplos ou enriquecer sua documentação.

​
Sintaxe básica de imagens

Use a sintaxe do Markdown para adicionar imagens à sua documentação: 
![Texto alternativo descrevendo a imagem](/path/to/image.png)
Sempre inclua um texto alternativo descritivo para melhorar a acessibilidade e o SEO. O texto alternativo deve descrever claramente o que a imagem mostra.
Os arquivos de imagem devem ter menos de 20 MB. Para arquivos maiores, hospede-os em um serviço de CDN como o Amazon S3 ou o Cloudinary.

​
Incorporação de imagens em HTML

Para ter mais controle sobre a exibição de imagens, use a tag HTML <img>: 
<img 
  src="/images/dashboard.png" 
  alt="Main dashboard interface"
  height="300"
  className="rounded-lg"
/>

​
Desativar o zoom

Para desativar o zoom padrão ao clicar em imagens, adicione a propriedade noZoom: 
<img 
  src="/images/screenshot.png" 
  alt="Texto alternativo descritivo"
  noZoom 
  height="200"
/>
Para tornar uma imagem um link clicável, envolva-a em uma tag de âncora e adicione a propriedade noZoom: 
<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Mintlify logo"
    noZoom 
    height="100"
  />
</a>
Imagens dentro de tags de âncora exibem automaticamente o cursor de ponteiro para indicar que são clicáveis.

​
Imagens para modos claro e escuro

Para exibir imagens diferentes nos temas claro e escuro, use classes do Tailwind CSS: 
<!-- Imagem no modo claro -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Interface no modo claro"
/>

<!-- Imagem no modo escuro -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Interface no modo escuro"
/>

​
Vídeos

A Mintlify oferece suporte a tags HTML em Markdown, dando a você flexibilidade para criar conteúdo rico.
Sempre inclua texto alternativo dentro dos elementos de vídeo para navegadores que não oferecem suporte à reprodução de vídeos.

​
Incorporações do YouTube

Incorpore vídeos do YouTube usando elementos iframe: 
<iframe
  className="w-full aspect-video rounded-xl"
  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>

​
Vídeos auto-hospedados

Use o elemento HTML <video> para conteúdo de vídeo hospedado por você: 
<video
  controls
  className="w-full aspect-video rounded-xl"
  src="link-to-your-video.com"
></video>

​
Reprodução automática de vídeos

Para habilitar a reprodução automática de um vídeo, use: 
<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
Ao usar a sintaxe JSX, escreva atributos compostos em camelCase: autoPlay, playsInline, allowFullScreen.

​
iframes

Incorpore conteúdo externo usando elementos de iframe: 
<iframe 
  src="https://example.com/embed" 
  title="Embedded content"
  className="w-full h-96 rounded-xl"
></iframe>

Referência do componente Frame

Saiba como usar o componente Frame para exibir imagens.