Immagini e incorporamenti

Aggiungi immagini, video e iframe

Aggiungi immagini, incorpora video e includi contenuti interattivi con iframe nella tua documentazione.

Tutte le risorse statiche nel tuo repository della documentazione vengono servite automaticamente al percorso corretto sul tuo dominio. Ad esempio, se nel tuo repo hai /images/my-logo.png, l’immagine sarà disponibile all’indirizzo https://docs.yoursite.com/images/my-logo.png.

Immagini

Aggiungi immagini per fornire contesto visivo, esempi o elementi decorativi alla documentazione.

Sintassi di base per le immagini

Usa la sintassi Markdown per aggiungere immagini alla documentazione:

![Testo alternativo che descrive l'immagine](/path/to/image.png)

Includi sempre un testo alternativo descrittivo per migliorare l’accessibilità e la SEO. Il testo alternativo deve descrivere chiaramente ciò che mostra l’immagine.

I file immagine devono essere più piccoli di 20 MB. Per file più grandi, ospitali su un servizio CDN come Amazon S3 o Cloudinary.

Incorporamento di immagini HTML

Per un maggiore controllo sulla visualizzazione delle immagini, usa i tag HTML <img>:

<img 
  src="/images/dashboard.png" 
  alt="Main dashboard interface"
  height="300"
  className="rounded-lg"
/>

Disattivare la funzionalità di zoom

Per disattivare lo zoom predefinito al clic sulle immagini, aggiungi la proprietà noZoom:

<img 
  src="/images/screenshot.png" 
  alt="Descriptive alt text"
  noZoom 
  height="200"
/>

Collegare le immagini

Per rendere un’immagine cliccabile, racchiudi l’immagine in un tag ancora e aggiungi la proprietà noZoom:

<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Logo Mintlify"
    noZoom 
    height="100"
  />
</a>

Le immagini all’interno dei tag ancora mostrano automaticamente un cursore a forma di puntatore per indicare che sono cliccabili.

Immagini per modalità chiara e scura

Per mostrare immagini diverse per i temi chiaro e scuro, usa le classi di Tailwind CSS:

<!-- Immagine per la modalità chiara -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Interfaccia in modalità chiara"
/>

<!-- Immagine per la modalità scura -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Interfaccia in modalità scura"
/>

Video

Mintlify supporta i tag HTML in Markdown, offrendoti la flessibilità necessaria per creare contenuti ricchi.

Includi sempre un contenuto testuale di fallback all’interno degli elementi video per i browser che non supportano la riproduzione dei video.

Incorporamento di YouTube

Incorpora video di YouTube usando elementi 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>

Video ospitati autonomamente

Usa l’elemento HTML <video> per contenuti video ospitati autonomamente:

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

Riproduzione automatica dei video

Per avviare automaticamente la riproduzione di un video, usa:

<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>

Quando utilizzi la sintassi JSX, scrivi gli attributi composti in camelCase: autoPlay, playsInline, allowFullScreen.

iframe

Incorpora contenuti esterni utilizzando elementi iframe:

<iframe 
  src="https://example.com/embed" 
  title="Contenuto incorporato"
  className="w-full h-96 rounded-xl"
></iframe>

Risorse correlate

Riferimento del componente Frame

Scopri come utilizzare il componente Frame per presentare immagini.