diff --git a/src/content/docs/pt-br/guides/images.mdx b/src/content/docs/pt-br/guides/images.mdx index f67777e4ae32b..b7bfd16c3da57 100644 --- a/src/content/docs/pt-br/guides/images.mdx +++ b/src/content/docs/pt-br/guides/images.mdx @@ -7,6 +7,7 @@ import Since from '~/components/Since.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import Badge from '~/components/Badge.astro'; import RecipeLinks from "~/components/RecipeLinks.astro"; +import { Steps } from '@astrojs/starlight/components'; Astro fornece diversas formas de utilizar imagens no seu site, sejam elas armazenadas localmente dentro do seu projeto, vinculadas de uma URL externa, ou gerenciadas em um CMS ou CDN! @@ -14,20 +15,19 @@ Astro fornece diversas formas de utilizar imagens no seu site, sejam elas armaze ### `src/` vs `public/` -Nós recomendamos que imagens locais sejam mantidas em `src/` quando possível para que o Astro possa transformar, otimizar e fazer bundle delas. Arquivos no diretório `/public` sempre são servidos ou copiados para a pasta da build como estão, com nenhum processamento. +Nós recomendamos que imagens locais sejam mantidas em `src/` quando possível para que o Astro possa transformar, otimizar e fazer bundle delas. Arquivos no diretório `/public` sempre são servidos ou copiados para a pasta da build como estão, sem nenhum processamento. -Suas imagens locais armazenadas em `src/` podem ser usadas por todos os arquivos em seu projeto: `.astro`, `.md`, `.mdx`, `.mdoc`, e outros frameworks de UI. Imagens podem ser armazenadas em qualquer pasta, incluindo ao lado do seu conteúdo. +Suas imagens locais armazenadas em `src/` podem ser usadas por todos os arquivos em seu projeto: `.astro`, `.md`, `.mdx`, `.mdoc`, e outros frameworks de UI. As imagens podem ser armazenadas em qualquer pasta, inclusive junto com o conteúdo. Armazene suas imagens na pasta `public/` se você quer evitar qualquer processamento ou para ter um link público direto para elas. ### Imagens remotas -Você pode também escolher armazenar suas imagens remotamente, em um sistema de gerenciamento de conteúdo (CMS, do inglês "content management system") ou plataforma de gerenciamento de assets digitais (DAM, do inglês "digital asset management"). +Você também pode escolher armazenar suas imagens remotamente, em um sistema de gerenciamento de conteúdo (CMS, do inglês "content management system") ou plataforma de gerenciamento de assets digitais (DAM, do inglês "digital asset management"). -Para proteção extra enquanto lida com fontes externas, imagens remotas serão apenas processadas de [fontes de imagem autorizadas](#autorizando-imagens-remotas) especificadas na sua configuração. Contudo, quaisquer imagens remotas podem ser mostradas. - -Astro pode buscar dados remotamente usando APIs ou mostrar imagens a partir de seus caminhos de URL completos. Veja nossos [guias de CMS](/pt-br/guides/cms/) para exemplos em como integrar serviços comuns. +Para proteção extra ao lida com fontes externas, imagens remotas serão apenas processadas de [fontes de imagem autorizadas](#autorizando-imagens-remotas) especificadas na sua configuração. Contudo, quaisquer imagens remotas podem ser mostradas. +Astro pode buscar dados remotamente usando APIs ou mostrar imagens a partir de seus caminhos de URL completos. Veja nossos [guias de CMS](/pt-br/guides/cms/) para exemplos de integração de serviços comuns. ## Imagens em arquivos `.astro` @@ -41,12 +41,12 @@ import { Image } from 'astro:assets'; import imagemPassaroLocal from '../../imagens/subpasta/imagemPassaroLocal.png'; --- Um pássaro sentando em um ninho de ovos. -Um passáro. -Um passáro. +Um pássaro. +Um pássaro. Um pássaro sentando em um ninho de ovos. -Um passáro. -Um passáro. +Um pássaro. +Um pássaro. ``` Para importar imagens dinamicamente do diretório `src/`, veja a seguinte receita: @@ -59,10 +59,10 @@ Utilize o componente `` integrado do Astro para mostrar versões otimiz Imagens na pasta `public/`, assim como imagens remotas não especificadamente configuradas no seu projeto, também podem ser usadas com o componente Image, mas não serão processadas. -`` pode transformar as dimensões, tipo de arquivo, e controle da qualidade da sua imagem mostrada local ou autorizada remota. A tag `` resultante inclui os atributos `alt`, `loading` e `decoding` e infere as dimensões da imagem para evitar **Cumulative Layout Shift (CLS)**. +`` pode transformar as dimensões, o tipo de arquivo e a qualidade de uma imagem local ou remota autorizada para controlar a imagem exibida. A tag `` resultante inclui os atributos `alt`, `loading` e `decoding` e infere as dimensões da imagem para evitar **Cumulative Layout Shift (CLS)**. :::tip[O que é Cumulative Layout Shift?] -[Cumulative Layout Shift (CLS) ou Mudança Cumulativa de Layout](https://web.dev/cls/), é uma métrica do Core Web Vitals para mensurar o quanto o conteúdo da sua página se moveu durante o carregamento. O componente `` otimizada para CLS ao automaticamente definir o `width` e `height` corretos para suas imagens locais. +[Cumulative Layout Shift (CLS) ou Mudança de Layout Cumulativa](https://web.dev/articles/cls?hl=pt-br), é uma métrica do Core Web Vitals para mensurar o quanto o conteúdo da sua página se moveu durante o carregamento. O componente `` otimizada para CLS ao automaticamente definir o `width` e `height` corretos para suas imagens locais. ::: ```astro title="src/components/MeuComponente.astro" @@ -73,7 +73,7 @@ import minhaImagem from "../assets/minha_imagem.png"; // Imagem é 1600x900 --- -Uma descrição de minha imagem. +Uma descrição da minha imagem. ``` ```html @@ -85,7 +85,7 @@ import minhaImagem from "../assets/minha_imagem.png"; // Imagem é 1600x900 height="900" decoding="async" loading="lazy" - alt="Uma descrição de minha imagem." + alt="Uma descrição da minha imagem." /> ``` @@ -105,7 +105,7 @@ O formato do valor `src` de sua imagem depende de onde o seu arquivo de imagem e texto descritivo ``` -- **Imagens na pasta `public/`** - utilize o **caminho de arquivo da imagem relativo a pasta public**: +- **Imagens na pasta `public/`** - utilize o **caminho do arquivo da imagem relativo à pasta public**: ```astro title="src/pages/index.astro" '"/imagens/minha-imagem-publica.png"' --- @@ -129,7 +129,8 @@ O formato do valor `src` de sua imagem depende de onde o seu arquivo de imagem e src="https://exemplo.com/imagem-remota.jpg" alt="texto descritivo" width="200" - height="150" /> + height="150" + /> ``` ##### alt (obrigatório) @@ -138,21 +139,21 @@ Utilize o atributo `alt` obrigatório para fornecer uma string de [texto alterna Se uma imagem é meramente decorativa (ou seja, não contribui para o entendimento da página), defina `alt=""` para que leitores de tela e outras tecnologias assistivas saibam ignorar a imagem. -##### width e height (obrigatório para imagens remotas e de `public/`) +##### width e height (obrigatório para imagens em `public/`) Essas propriedades definem as dimensões a se utilizar para a imagem. -Ao utilizar imagens em sua proporção de tela original, o `width` e `height` são opcionais. Essas dimensões podem ser inferidos automaticamente a partir de arquivos de imagem localizados em `src/` e a partir de imagens remotas com [`inferSize` definido como `true`](#infersize). +Ao utilizar imagens em sua proporção original, o `width` e `height` são opcionais. Essas dimensões podem ser inferidos automaticamente a partir de arquivos de imagem localizados em `src/` e a partir de imagens remotas com [`inferSize` definido como `true`](#infersize). -Porém, ambas essas propriedades são obrigatórias para imagens armazenadas em sua pasta `public/` já que o Astro é incapaz de analisar esses arquivos. +No entanto, essas duas propriedades são necessárias para imagens armazenadas em sua pasta `public/`, pois o Astro não consegue analisar esses arquivos. ##### densities

-Uma lista de densidades de pixels para gerar a imagem +Uma lista de densidades de pixel a serem geradas para a imagem. -Se atribuído, o valor é usado para gerar o atributo `srcset`na tag ``. Você não deve prover um valor para `widths` quando tiver usando esse atributo. +Se fornecido, esse valor será usado para gerar um atributo `srcset` na tag ``. Não forneça um valor para `widths` ao usar esse valor. As densidades que são iguais a larguras maiores do que a imagem original serão ignoradas para evitar o aumento da escala da imagem. @@ -161,17 +162,23 @@ As densidades que são iguais a larguras maiores do que a imagem original serão import { Image } from 'astro:assets'; import minhaImagem from "../assets/minha_imagem.png"; --- -Uma descrição para imagem. +Uma descrição da minha imagem. ``` ```html + Uma descrição para imagem.` Uma [propriedade sizes](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) também deve ser fornecida. +Se fornecido, esse valor será usado para gerar um atributo `srcset` na tag ``. Uma [propriedade `sizes`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) também deve ser fornecida. -Não forneça um valor para `densities` ao usar este valor. Apenas um destes dois valores pode ser usado para gerar um srcset. +Não forneça um valor para `densities` ao usar este valor. Apenas um destes dois valores pode ser usado para gerar um `srcset`. -Larguras que forem maiores do que a imagem original serão ignoradas para evitar o redimensionamento da imagem. +Larguras que forem maiores do que a imagem original serão ignoradas para evitar o aumento da escala da da imagem. ```astro --- @@ -200,11 +207,12 @@ import minhaImagem from "../assets/minha_imagem.png"; // Image is 1600x900 src={minhaImagem} widths={[240, 540, 720, minhaImagem.width]} sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${minhaImagem.width}px`} - alt="Uma descrição para minha imagem." + alt="Uma descrição da minha imagem." /> ``` ```html + Uma descrição para minha imagem.` irá produzir um arquivo `.webp`.

-Te permite definir os valores oridinais de `width` e `height` para imagens remotas automaticamente. +Te permite definir os valores originais de `width` e `height` de uma imagem remota automaticamente. Por padrão, essa propriedade é definida como `false` e você deve especificar ambas as dimensões para sua imagem remota. -Adicione `inferSize` ao componente `` (ou `inferSize: true` em `getImage()`) para inferrir esses valores da imagem remota quando baixada. Isso é útil quando você não sabe as dimensões da imagem remota, ou quando elas podem mudar. +Adicione `inferSize` ao componente `` (ou `inferSize: true` em `getImage()`) para inferir esses valores da imagem remota quando baixada. Isso é útil quando você não sabe as dimensões da imagem remota, ou quando elas podem mudar. ```astro mark="inferSize" --- @@ -256,11 +264,11 @@ import { Image } from 'astro:assets'; Um gato dormindo no sol. ``` -`inferSize` pode baixar informações de uma [imagem remota de um domínio que não foi autorizado](#autorizando-imagens-remotas), no entanto, a imagem em si não sera processada. +`inferSize` pode obter as informações de uma [imagem remota de um domínio que não foi autorizado](#autorizando-imagens-remotas), no entanto, a imagem em si permanecerá não processada. ##### Propriedades adicionais -Em adição as propriedades acima, o componente `` aceita todas as propriedades aceitas pela tag `` do HTML. +Além das propriedades acima, o componente `` aceita todas as propriedades aceitas pela tag HTML ``. Por exemplo, você pode fornecer uma `class` para o elemento `` final. @@ -309,7 +317,6 @@ const {src, ...attrs} = Astro.props; ``` - ### ``

@@ -327,7 +334,7 @@ import minhaImagem from "../assets/minha_imagem.png"; // Image is 1600x900 ``` ```html - + @@ -337,14 +344,14 @@ import minhaImagem from "../assets/minha_imagem.png"; // Image is 1600x900 height="900" decoding="async" loading="lazy" - alt="Uma descrição para a minha imagem." + alt="Uma descrição da minha imagem." /> ``` #### Propriedades -`` aceita todas as propriedades do componente ``, juntamente com: +`` aceita todas as propriedades do componente ``, além das seguintes: ##### `formats` @@ -360,23 +367,28 @@ Por padrão, é configurado como `.png` para imagens estáticas (ou `.jpg` se a Um objeto de atributos a serem adicionados à tag ``. -Use essa propriedade para aplicar atributos ao elemento externo ``. Atributos aplicados diretamente ao componente `` serão aplicados internamente ao elemento ``, exceto aqueles usados para a transformação da imagem. +Use essa propriedade para aplicar atributos ao elemento externo ``. Atributos aplicados diretamente ao componente `` serão aplicados internamente ao elemento ``, exceto aqueles usados para transformação de imagens. ```astro title="src/components/MeuComponente.astro" --- import { Picture } from "astro:assets"; -import minhaImagem from "../minha_imagem.png"; // Image is 1600x900 +import minhaImagem from "../minha_imagem.png"; // Imagem é 1600x900 --- - + ``` ```html + Uma descrição para a minha imagem.` diretamente, com controle total sobre seu resultado final. Essas imagens não serão processadas e otimizadas. -Ela aceita todas as propriedades da tag `` do HTML, e a única propriedade obrigatória é `src`. +Ela aceita todas as propriedades da tag HTML ``, e a única propriedade obrigatória é `src`. #### Imagens locais em `src/` @@ -402,11 +414,11 @@ Por exemplo, utilize as propriedades `height` e `width` da imagem para evitar CL // importe imagens locais import meuCachorro from `../../imagens/pets/cachorro-local.jpg` --- -// acesse propriedades da imagem +// acesse as propriedades da imagem Um cachorro latindo. ``` -Assets de imagem importadas correspondem a seguinte assinatura: +Assets de imagem importadas correspondem à seguinte assinatura: ```ts interface ImageMetadata { @@ -434,7 +446,7 @@ Para imagens remotas, utilize a **URL completa** da imagem como o valor de `src` ### Escolhendo `` vs `` -O componente `` otimiza sua imagem e infere a largura e altura (de imagens locais) com base na proporção de tela original para evitar CLS. +O componente `` otimiza sua imagem e infere a largura e altura (de imagens locais) com base na proporção original para evitar CLS. Utilize o elemento `` do HTML quando você não pode utilizar o componente ``, por exemplo: - para formatos de imagem não suportados @@ -517,6 +529,9 @@ import foguete from '../assets/foguete.png'; # Minha Página MDX +// Imagem local armazenada na mesma pasta +![Houston pelo mundo](houston.png) + // Imagem local armazenada em src/assets/ Um foguete no espaço. Um foguete no espaço. @@ -536,9 +551,9 @@ import foguete from '../assets/foguete.png'; ## Imagens em coleções de conteúdo -Imagens em coleções de conteúdo serão processadas da mesma forma que em arquivos [Markdown](#imagens-em-arquivos-markdown) e [MDX](#imagens-em-arquivos-mdx) dependendo do tipo do arquivo que estiver usando. +Imagens em coleções de conteúdo serão processadas da mesma forma que em arquivos [Markdown](#imagens-em-arquivos-markdown) e [MDX](#imagens-em-arquivos-mdx) dependendo do tipo de arquivo que você estiver usando. -Adicionalmente, você pode declarar uma imagem associada para uma entrada de coleções de conteúdo, como a imagem de capa de uma postagem de blog, em seu frontmatter utilizando o caminho relativo a pasta atual: +Além disso, você pode declarar uma imagem associada a uma entrada de coleções de conteúdo, como a imagem de capa de uma postagem de blog, em seu frontmatter usando seu caminho relativo à pasta atual: ```md title="src/content/blog/minha-postagem.md" {3} --- @@ -595,7 +610,7 @@ const todasPostagensBlog = await getCollection("blog"); ## Imagens em componentes de frameworks de UI -Ao adicionar imagens em um componente de framework de UI, utilize a sintaxe de imagem própria do framework para renderizar uma imagem (e.x. `` em JSX, `` em Svelte). +Ao adicionar imagens em um componente de framework de UI, utilize a sintaxe de imagem própria do framework para renderizar uma imagem (por exemplo, `` em JSX e `` em Svelte). Imagens locais devem **primeiro ser importadas** para acessar suas [propriedades de imagem](#imagens-locais-em-src) como `src`. @@ -624,7 +639,6 @@ O componente ``, assim como qualquer outro componente Astro, **não est Porém, você pode passar o conteúdo estático gerado por `` para um componente de framework dentro de um arquivo `.astro` como um filho ou utilizando um [`` nomeado](/pt-br/guides/framework-components/#posso-utilizar-componentes-astro-dentro-de-meus-componentes-de-frameworks): - ```astro title="EnvolvedorImagem.astro" --- import ComponenteReact from './ComponenteReact.jsx'; @@ -643,7 +657,7 @@ import estrelas from "~/estrelas/docline.png"; `getImage()` depende em APIs únicas do servidor e quebra a build quando é utilizado no cliente. ::: -A função `getImage()` foi planejada para gerar imagens destinadas a serem em outro lugar do que diretamente no HTML, por exemplo em uma [Rota de API](/pt-br/guides/endpoints/#endpoints-do-servidor-rotas-de-api). Ela te permite criar seu próprio componente `` customizado. +A função `getImage()` foi planejada para gerar imagens destinadas a serem usadas em outro lugar do que diretamente no HTML, por exemplo em uma [Rota de API](/pt-br/guides/endpoints/#endpoints-do-servidor-rotas-de-api). Ela te permite criar seu próprio componente `` customizado. @@ -665,7 +679,7 @@ Retorna um objeto com as seguintes propriedades: ```js { rawOptions: {...} // Parâmetros originais passados - options: {...}, // Parametros validados passados + options: {...}, // Parâmetros validados passados src: "https//..." // Caminho para a imagem gerada srcSet: { values: [...], // Valores gerados para srcset, cada entrada tem uma url e uma descrição de tamanho @@ -688,7 +702,7 @@ Se a imagem for meramente decorativa (ou seja, não contribui para o entendiment [Sharp](https://github.com/lovell/sharp) é o serviço de imagem padrão utilizado em `astro:assets`. Você pode configurar o serviço de imagem utilizando a opção [`image.service`](/pt-br/reference/configuration-reference/#imageservice). :::note -Ao usar um [gerenciador de pacotes rigoroso](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) como o `pnpm`, talvez seja necessário instalar o Sharp manualmente o seu projeto, mesmo que seja uma dependência do Astro: +Ao usar um [gerenciador de pacotes rigoroso](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) como o `pnpm`, talvez seja necessário instalar o Sharp manualmente no seu projeto, mesmo que seja uma dependência do Astro: ```bash pnpm add sharp @@ -711,7 +725,7 @@ export default defineConfig({ ### Configure o serviço de passagem não-operacional -Se o seu [adaptador para modo `server` ou `hybrid`](https://astro.build/integrations/?search=&categories%5B%5D=adapters) não suportar os serviços de otimização Squoosh e Shart integrados do Astro (e.g. Deno, Cloudflare), você pode configurar um serviço de imagem não-operacional para permitir que utilize os componentes `` e ``. Note que o Astro não executa nenhuma transformação e processamento de imagens nesses ambientes. No entanto, você ainda pode os outros benefícios de utilizar o `astro:assets`, incluindo não ter Cumulative Layout Shift (CLS), a exigência do atributo `alt`, e a experiência de autoria consistente. +Se o seu [adaptador para modo `server` ou `hybrid`](https://astro.build/integrations/?search=&categories%5B%5D=adapters) não suportar os serviços de otimização Squoosh e Sharp integrados do Astro (por exemplo, Deno e Cloudflare), você pode configurar um serviço de imagem não-operacional para permitir que utilize os componentes `` e ``. Note que o Astro não executa nenhuma transformação e processamento de imagens nesses ambientes. No entanto, você ainda pode aproveitar os outros benefícios de utilizar o `astro:assets`, incluindo não ter Cumulative Layout Shift (CLS), a exigência do atributo `alt` e uma experiência de criação consistente. Configure o `passthroughImageService` para evitar ambos os processamentos de imagem Squoosh e Sharp: @@ -727,7 +741,7 @@ export default defineConfig({ ## Integrações da Comunidade -Há diversas [integrações de imagem da comunidade](https://astro.build/integrations?search=images) por terceiros para otimizar e trabalhar com imagens em seu projeto Astro. +Há diversas [integrações de imagem da comunidade](https://astro.build/integrations?search=images) de terceiros para otimizar e trabalhar com imagens em seu projeto Astro. ## Atualize para v3.0 da v2.x @@ -735,7 +749,7 @@ Há diversas [integrações de imagem da comunidade](https://astro.build/integra `` agora é um componente integrado e a integração `@astrojs/image` anterior foi removida. -Essa e outras mudanças em como utilizar imagens no Astro pode causar algumas mudanças radicais ao atualizar seu projeto Astro de uma versão anterior. +Essas e outras alterações que acompanham o uso de imagens no Astro podem causar algumas mudanças significativas quando você atualizar seu projeto Astro de uma versão anterior. Por favor siga as instruções abaixo apropriadamente para atualizar um projeto Astro v2.x para v3.0. @@ -766,7 +780,7 @@ Se necessário, também atualize seu arquivo `src/env.d.ts` para substituir a re #### Remova o atalho de importação `~/assets` -Esse atalho de importação não é mais incluso por padrão com `astro:assets`. Se você esteve utilizando esse atalho com assets experimentais, você deve convertê-los para camianhos de arquivo relativos, ou [criar seu próprio atalho de importação](/pt-br/guides/aliases/). +Esse atalho de importação não é mais incluído por padrão com `astro:assets`. Se você estava utilizando esse atalho com assets experimentais, você deve convertê-los em caminhos de arquivo relativos ou [criar seu próprio atalho de importação](/pt-br/guides/aliases/). ```astro title="src/pages/posts/post-1.astro" del={2} ins={3} --- @@ -776,10 +790,10 @@ import foguete from '../../assets/foguete.png'; ``` #### Adicione suporte simples de assets para Cloudflare, Deno, Vercel Edge e Netlify Edge + +Astro v3.0 permite que `astro:assets` funcione sem erros no Cloudflare, Deno, Vercel Edge e Netlify Edge, que não suportam a otimização de imagem Squoosh e Sharp integrada do Astro. Observe que o Astro não realiza nenhuma transformação e processamento de imagem nesses ambientes. No entanto, você ainda pode aproveitar os outros benefícios do uso de `astro:assets`, incluindo a ausência de Cumulative Layout Shift (CLS), o atributo `alt` obrigatório e uma experiência de criação consistente. -Astro v3.0 permite `astro:assets` funcionar sem erros em Cloudflare, Deno, Vercel Edge e Netlify Edge, que não suporta a otimização integrada do Astro, Squoosh e Sharp. Note que Astro não realiza nenhuma transformação e processamento de imagem nesses ambientes. Porém, você ainda pode aproveitar os outros benefícios de se utilizar `astro:assets`, incluindo nenhum Cumulative Layout Shift (CLS), a aplicação do atributo `alt`, e a experiência de autoria consistente. - -Se você anteriormente evitou utilizar `astro:assets` por conta dessas limitações, agora você pode utilizá-lo sem problemas. Você pode configurar o serviço de imagem no-op para explicitamente optar por esse compartamento: +Se antes você evitava usar `astro:assets` por causa dessas restrições, agora pode usá-los sem problemas. Você pode configurar o serviço de imagem no-op para aceitar explicitamente esse comportamento: ```js title="astro.config.mjs" ins={4-8} import { defineConfig } from 'astro/config'; @@ -799,7 +813,7 @@ Veja o guia de Imagens para te ajudar a decidir [onde armazenar suas imagens](#o ### Atualize tags `` existentes -Anteriormente, importar uma imagem iria retornar uma simples `string` com o caminho da imagem. Agora, assets de imagem importadas correspodem a seguinte assinatura: +Anteriormente, a importação de uma imagem retornava uma simples `string` com o caminho da imagem. Agora, os assets de imagem importados correspondem à seguinte assinatura: ```ts interface ImageMetadata { @@ -823,7 +837,7 @@ import foguete from '../imagens/foguete.svg'; ### Atualize seus arquivos Markdown, MDX e Markdoc -Imagens relativas da `src/` do seu projeto agora podem ser referenciadas em Markdown, MDX e Markdoc utilizando a sintaxe padrão do Markdown `![alt](src)`. +Imagens relativas da pasta `src/` do seu projeto agora podem ser referenciadas em Markdown, MDX e Markdoc utilizando a sintaxe padrão do Markdown `![alt](src)`. Isso te permite mover suas imagens do diretório `public/` para o `src/` do seu projeto onde agora elas serão processadas e otimizadas. Suas imagens existentes em `public/` e imagens remotas ainda são válidas mas não são otimizadas pelo processo de build do Astro. @@ -837,16 +851,16 @@ Isso te permite mover suas imagens do diretório `public/` para o `src/` do seu ![Uma noite com um céu estrelado.](./estrelas.png) ``` -Se você requer mais controle sobre seus atributos de imagem, nós recomendamos utilizar o formato de arquivo `.mdx`, que te permite incluir o componente `` do Astro ou uma tag `` JSX em adição a sintaxe do Markdown. Utilize a [integração MDX](/pt-br/guides/integrations-guide/mdx/) para adicionar suporte de MDX para Astro. +Se você requer mais controle sobre seus atributos de imagem, nós recomendamos utilizar o formato de arquivo `.mdx`, que permite incluir o componente `` do Astro ou uma tag JSX `` além da sintaxe do Markdown. Utilize a [integração MDX](/pt-br/guides/integrations-guide/mdx/) para adicionar suporte de MDX ao Astro. ### Remova `@astrojs/image` - Se você estava utilizando a integração de imagem em Astro v2.x, complete as seguintes etapas: + 1. Remova a integração `@astrojs/image`. - Você deve [remover a integração](/pt-br/guides/integrations-guide/#removendo-uma-integração) a desinstalando e então a removendo do seu arquivo `astro.config.mjs`. + Você deve [remover a integração](/pt-br/guides/integrations-guide/#removendo-uma-integração) desinstalando-a e, em seguida, removendo-a do seu arquivo `astro.config.mjs`. ```js del={3,7} // astro.config.mjs @@ -859,17 +873,17 @@ Se você estava utilizando a integração de imagem em Astro v2.x, complete as s ] }) ``` + 2. Atualize tipos (se necessário). Se você tinha tipos especiais configurados para `@astrojs/image` em `src/env.d.ts`, pode ser necessário alterá-los de volta para os tipos padrão do Astro se a atualização para a versão 3 não concluiu esta etapa automaticamente para você. - ```ts title="src/env.d.ts" del={1} ins={2} /// /// ``` - Uma atualização similar se necessária deve ser aplicada no `tsconfig.json`: + Da mesma forma, atualize o `tsconfig.json` se necessário: ```json title="tsconfig.json" del={3} ins={4} { @@ -919,12 +933,13 @@ Se você estava utilizando a integração de imagem em Astro v2.x, complete as s }, }); ``` + -### Atualize Esquemas de Coleções de Conteúdo +### Atualize esquemas de Coleções de Conteúdo -Agora você pode declarar uma imagem associada a uma entrada de coleções de conteúdo, como a imagem de capa de uma postagem de blog, em seu frontmatter utilizando seu caminho relativo a pasta atual. +Agora você pode declarar uma imagem associada a uma entrada de coleções de conteúdo, como a imagem de capa de uma postagem de blog, em seu frontmatter usando seu caminho relativo à pasta atual. -O novo utilitário `image` para coleções de conteúdo te permite validar os metadados da imagem utilizando Zod. Aprenda mais sobre [como utilizar imagens em coleções de conteúdo](/pt-br/guides/images/#imagens-em-coleções-de-conteúdo) +O novo utilitário `image` para coleções de conteúdo te permite validar os metadados da imagem utilizando Zod. Aprenda mais sobre [como utilizar imagens em coleções de conteúdo](/pt-br/guides/images/#imagens-em-coleções-de-conteúdo). ### Navegando Importações de Imagem no Astro v3.0 @@ -934,9 +949,10 @@ No Astro v3.0, se você precisar preservar o antigo comportamento de importaçã --- import Sprite from '../assets/logo.svg?url'; --- - - - + + + + ``` Essa abordagem garante que você obtenha a string de URL. Tenha em mente que, durante o desenvolvimento, o Astro usa um caminho `src/`, mas, ao fazer build, ele gera caminhos com hash como `/_astro/gato.a6737dd3.png`. diff --git a/src/content/docs/pt-br/reference/errors/missing-image-dimension.mdx b/src/content/docs/pt-br/reference/errors/missing-image-dimension.mdx index 650daffb28df9..b9c8f0abb7029 100644 --- a/src/content/docs/pt-br/reference/errors/missing-image-dimension.mdx +++ b/src/content/docs/pt-br/reference/errors/missing-image-dimension.mdx @@ -14,4 +14,4 @@ Se sua imagem está dentro do seu diretório `src`, você provavelmente quis imp **Veja Também:** - [Imagens](/pt-br/guides/images/) -- [Componente Image#width-e-height-obrigatório](/pt-br/guides/images/#width-e-height-obrigatório-para-imagens-remotas-e-de-public) +- [Componente Image#width-e-height-obrigatório](/pt-br/guides/images/#width-e-height-obrigatório-para-imagens-em-public)