Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v3 image assets] #3739

Merged
merged 71 commits into from
Aug 30, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
71 commits
Select commit Hold shift + click to select a range
535de92
starting to take notes
sarah11918 Jul 11, 2023
3ff1e78
notes re: using in Astro files
sarah11918 Jul 12, 2023
eaea2fb
draft - images in astro files
sarah11918 Jul 13, 2023
881feef
choosing image img
sarah11918 Jul 13, 2023
f9a54b8
move v3 upgrade guide stuff to bottom
sarah11918 Jul 14, 2023
8ea2125
draft - images in markdown files
sarah11918 Jul 14, 2023
405af56
draft - images in mdx
sarah11918 Jul 14, 2023
95f35b5
draft - images in framework components
sarah11918 Jul 14, 2023
d1f9ef1
sprinkled a few more only local images optimized
sarah11918 Jul 14, 2023
8b66fc7
added and updates setting defaults on image component
sarah11918 Jul 14, 2023
904b1d6
carried over other Images page sections
sarah11918 Jul 14, 2023
21b4f99
split pages: images guide and other to be used elsewhere
sarah11918 Jul 14, 2023
4d85ed9
update assets folder guidance, and some formatting
sarah11918 Jul 17, 2023
1f57a63
Merge branch 'main' into v3-image-assets
sarah11918 Jul 17, 2023
86cac5f
3 migration guides - update links to image resources. NEED TO CHECK A…
sarah11918 Jul 17, 2023
68b4b0b
Merge branch 'main' into v3-image-assets
sarah11918 Jul 17, 2023
b6b8020
update link to public folder
sarah11918 Jul 17, 2023
474cd51
link check in `ko` file
sarah11918 Jul 17, 2023
a739b6e
drafted upgrade to v3 content
sarah11918 Jul 21, 2023
4f31c11
v3 update guide - content collections advice
sarah11918 Aug 8, 2023
088bc5d
add info re: Sharp the default
sarah11918 Aug 8, 2023
de56424
more fine-tuning and reorg
sarah11918 Aug 8, 2023
dad42c9
Merge branch 'main' into v3-image-assets
sarah11918 Aug 16, 2023
ac764a1
remove assets page and sidebar entry
sarah11918 Aug 16, 2023
b44ee9b
fixed links to old assets page in non-error pages
sarah11918 Aug 16, 2023
8ae7161
update netlify.toml with redirect assets to images
sarah11918 Aug 16, 2023
78b8ac5
removes the old image integration guide and redirects to image
sarah11918 Aug 16, 2023
140b120
Merge branch 'main' into v3-image-assets
sarah11918 Aug 16, 2023
44fbbf9
replaced error messages locally for checks
sarah11918 Aug 16, 2023
f06eae8
delete image integration guide from other languages
sarah11918 Aug 16, 2023
9033970
removed the built-in alias from code samples and explanations
sarah11918 Aug 16, 2023
7b3b17b
remove references to assets folder entirely
sarah11918 Aug 16, 2023
0013e20
added info about remote images
sarah11918 Aug 16, 2023
effcfa7
next pass at new image page (upgrade stuff still to do)
sarah11918 Aug 16, 2023
d4bdf1a
address links, incl fake config-ref links
sarah11918 Aug 16, 2023
26279ba
another quick link hotfix in error message
sarah11918 Aug 16, 2023
9e4b4aa
change remaining links to images; incl eggregious error message hotfixes
sarah11918 Aug 16, 2023
bc86153
move non-en images pages to old translations; update migrate-to links
sarah11918 Aug 16, 2023
a49f4c2
more link fixes in astro-components; missing-image-dimensions and fro…
sarah11918 Aug 17, 2023
e1909a3
Merge branch 'main' into v3-image-assets
sarah11918 Aug 17, 2023
bcbacf4
draft pass at v3 upgrade stuff!
sarah11918 Aug 17, 2023
be9573b
some proper Spanish
sarah11918 Aug 17, 2023
a4c7385
fix long sentence
sarah11918 Aug 17, 2023
6c2109e
quick formatting fixes
sarah11918 Aug 17, 2023
7118558
Apply suggestions from code review
sarah11918 Aug 17, 2023
dc3db17
Update src/content/docs/en/guides/images.mdx
sarah11918 Aug 17, 2023
1384931
remove too harsh info re image tag in Markdown
sarah11918 Aug 17, 2023
1616605
Apply suggestions from Yan comma review
sarah11918 Aug 17, 2023
94ebade
Update src/content/docs/en/guides/images.mdx
sarah11918 Aug 18, 2023
35f83e7
Merge branch 'v3-upgrade-guide' into v3-image-assets
sarah11918 Aug 19, 2023
649da28
removed experimental flag from image service api config example
sarah11918 Aug 19, 2023
014f6d5
add code example showing removing astro integration
sarah11918 Aug 19, 2023
8328a1d
moved the no op image service blurb into here from v3 guide
sarah11918 Aug 19, 2023
58feb02
updated from- guides with updated image assets content
sarah11918 Aug 23, 2023
480a70f
Merge branch 'v3-upgrade-guide' into v3-image-assets
sarah11918 Aug 23, 2023
4de2949
Merge branch 'v3-upgrade-guide' into v3-image-assets
sarah11918 Aug 23, 2023
282be51
Merge branch 'v3-upgrade-guide' into v3-image-assets
sarah11918 Aug 23, 2023
6910209
Merge branch 'v3-upgrade-guide' into v3-image-assets
sarah11918 Aug 25, 2023
4983774
i18n(zh-cn): Translate images.mdx (#4314)
liruifengv Aug 25, 2023
fede45b
Apply suggestions from morinokami code review
sarah11918 Aug 27, 2023
3037fc4
Merge branch 'v3-upgrade-guide' into v3-image-assets
delucis Aug 27, 2023
fef8035
Everyone caught so many little fixes!
sarah11918 Aug 29, 2023
3ad56f1
extra line
sarah11918 Aug 29, 2023
5ea73c6
another extra line
sarah11918 Aug 29, 2023
a0bc8c5
Rename and edit "4. Uninstall Sharp"
sarah11918 Aug 29, 2023
96eb594
i18n(zh-cn): Update zh from upstream (#4393)
liruifengv Aug 29, 2023
c34e030
i18n(ja): Update images.mdx (#4418)
morinokami Aug 29, 2023
769f771
Merge branch 'v3-upgrade-guide' into v3-image-assets
yanthomasdev Aug 30, 2023
af3a826
i18n(pt-BR): Update `images.mdx` for 3.0 (#4411)
yanthomasdev Aug 30, 2023
8dd423c
Merge branch 'v3-upgrade-guide' into v3-image-assets
yanthomasdev Aug 30, 2023
bdbb591
Bring back ES guide changes
yanthomasdev Aug 30, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions netlify.toml
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,14 @@
from = "/:lang/guides/client-side-routing"
to = "/:lang/guides/view-transitions"

[[redirects]]
from = "/:lang/guides/assets"
to = "/:lang/guides/images"

[[redirects]]
from = "/:lang/guides/integrations-guide/image"
to = "/:lang/guides/images"

[[redirects]]
from = "/:lang/migration/0.21.0"
to = "/:lang/guides/upgrade-to/v1"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Since from '~/components/Since.astro';
Astro bietet dir verschiedene Möglichkeiten, Bilder auf deiner Website zu verwenden, ganz gleich, ob sie lokal in deinem Projekt gespeichert sind, auf anderen Quellen verlinkt werden oder in einem CMS oder CDN gespeichert sind!

:::note[Assets verwenden (Experimentell)]
Die experimentelle Asset-Unterstützung wurde in `astro@2.1.0` hinzugefügt. Wenn du die Unterstützung für Assets aktiviert hast, findest du weitere Informationen in der [Asset-Anleitung (Experimentell)](/de/guides/assets/).
Die experimentelle Asset-Unterstützung wurde in `astro@2.1.0` hinzugefügt. Wenn du die Unterstützung für Assets aktiviert hast, findest du weitere Informationen in der [Asset-Anleitung (Experimentell)](/de/guides/images/).

**Einige der folgenden Ratschläge sind nicht mit der experimentellen Flag kompatibel.**
:::
Expand Down Expand Up @@ -38,7 +38,7 @@ import rocket from '../images/rocket.svg';

Du kannst die Standard Markdown `![]()` Syntax oder die Standard HTML `<img>`-Tags in deinen `.md`-Dateien für Bilder verwenden, die sich in deinem `public/`-Ordner befinden, oder für Remote-Bilder auf einem anderen Server.

Wenn du deine Bilder nicht in `public/` speichern kannst, empfehlen wir, die [experimentelle Unterstützung für Assets](/de/guides/assets/) zu aktivieren oder das Dateiformat `.mdx` zu verwenden, mit dem du importierte Komponenten mit einer Markdown-ähnlichen Syntax kombinieren kannst. Verwende die [MDX-Integration](/de/guides/integrations-guide/mdx/), um Astro-Unterstützung für MDX hinzuzufügen.
Wenn du deine Bilder nicht in `public/` speichern kannst, empfehlen wir, die [experimentelle Unterstützung für Assets](/de/guides/images/) zu aktivieren oder das Dateiformat `.mdx` zu verwenden, mit dem du importierte Komponenten mit einer Markdown-ähnlichen Syntax kombinieren kannst. Verwende die [MDX-Integration](/de/guides/integrations-guide/mdx/), um Astro-Unterstützung für MDX hinzuzufügen.

```md
<!-- src/pages/post-1.md -->
Expand Down Expand Up @@ -121,7 +121,7 @@ Das Attribut `src` ist **relativ zum öffentlichen Ordner**. In Markdown kannst

### `src/assets/` (experimentell)

In der Anleitung [Assets (Experimentell)](/de/guides/assets/) kannst du nachlesen, wie du den Ordner `/assets/` experimentell nutzen kannst.
In der Anleitung [Assets (Experimentell)](/de/guides/images/) kannst du nachlesen, wie du den Ordner `/assets/` experimentell nutzen kannst.

Dazu musst du deine bestehenden Bilder aktualisieren, die aktuelle Astro-Bildintegration entfernen und zusätzliche manuelle Änderungen vornehmen, um einige der neuen Funktionen zu nutzen.

Expand All @@ -132,7 +132,7 @@ Die offizielle Bild-Integration von Astro bietet zwei verschiedene Astro-Kompone
Nach der [Installation von `@astrojs/image`](/de/guides/integrations-guide/image/#installation) kannst du diese beiden Komponenten überall dort verwenden, wo du Astro-Komponenten verwenden kannst: in `.astro`- und `.mdx`-Dateien.

:::note[Inkompatibel mit Assets]
Wenn du die experimentelle Asset-Unterstützung aktiviert hast, musst du die offizielle Integration deinstallieren. Weitere Informationen findest du im [Assets (Experimental) Guide](/de/guides/assets/).
Wenn du die experimentelle Asset-Unterstützung aktiviert hast, musst du die offizielle Integration deinstallieren. Weitere Informationen findest du im [Assets (Experimental) Guide](/de/guides/images/).
:::

### `<Image />`
Expand Down
File renamed without changes.
373 changes: 373 additions & 0 deletions old-translations/ja/images.mdx

Large diffs are not rendered by default.

163 changes: 163 additions & 0 deletions old-translations/zh-CN/guides/images.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
---
title: 图片
description: 学习如何在 Astro 项目中包含图片。
i18nReady: true
---
import Since from '~/components/Since.astro';


在 Astro 项目中,有很多种在网站中使用图片的方式。无论是用存储在项目中的图片,还是链接外部图片,亦或从像 CMS(内容管理系统)或 CDN(内容分发网络)这样的地方加载图片,都没问题!

:::note[`astro:assets` (Experimental - coming in v3.0)]
实验性 `astro:assets` 模块将在 `astro@3.0` 中默认启用.

请按照 [资源(实验性)使用指南](/zh-cn/guides/images/) 开始使用新的图片解决方案!

**下面的一些建议可能与实验性标志不兼容。如果你正在使用 `astro:assets` 请参考资源页面。**
:::

### `.astro` 文件中

你可以在 `.astro` 文件中使用标准的 HTML `<img>``<img />` 元素来展示图片,同时也支持所有 HTML 图片属性。

src 属性是必需的,其格式取决于图像的存储位置以及你是否启用了对资源的实验性支持:

```astro
---
// src/pages/index.astro
import rocket from '../images/rocket.svg';
---
<!-- 位于其它服务器上的图片 -->
<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro">
<!-- 存储在 public/assets/stars.png 的本地图片 -->
<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。">
<!-- 存储在 src/images/rocket.svg 的本地图片 -->
<img src={rocket} alt="外空中的一架火箭。"/>
```

### 在 Markdown 文件中

可以在 `.md` 文件中使用 Markdown 标准语法 `![]()`,或 HTML 标准语法 `<img>` 标签,来调用位于 `public/` 文件夹下或其它服务器上的图片。

如果你无法将图片保留在 `public/` 中,我们建议启用 [资源的实验性支持](/zh-cn/guides/images/), 或使用 `.mdx` 文件格式,该格式允许你将导入的组件与类似 Markdown 的语法结合起来。使用 [MDX 集成](/zh-cn/guides/integrations-guide/mdx/) 向 Astro 添加对 MDX 的支持。
```md
<!-- src/pages/post-1.md -->

# 我的 Markdown 页面

<!-- 存储在 public/assets/stars.png 的本地图片 -->
![一片繁星闪烁的夜空。](/assets/stars.png)
<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。">

<!-- 位于其它服务器上的图片 -->
![Astro](https://docs.astro.build/assets/logomark-light.png)
<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro">
```

### 在 MDX 文件中

你可以在 .mdx 文件中使用标准 Markdown `![]()` 语法或 JSX 的 `<img />` 标签来显示 `public/ ` 文件夹或远程服务器中的图片。

此外,你也可以导入和使用位于项目 `src/` 目录中的图像,就像在 Astro 组件中一样。


```mdx title="src/pages/post-1.mdx"

import rocket from '../images/rocket.svg';

# My MDX Page

// 存放在项目中 src/images/rocket.svg 路径的图片
<img src={rocket} alt="外空中的一架火箭。"/>

// 存放在项目中 public/assets/stars.png 路径的图片
![一片繁星闪烁的夜空。](/assets/stars.png)
<img src="/assets/stars.png" alt="一片繁星闪烁的夜空。" />

// 位于其它服务器上的图片
![Astro](https://docs.astro.build/assets/logomark-light.png)
<img src="https://docs.astro.build/assets/logomark-light.png" width="25" alt="Astro" />
```

### UI 框架中的组件

当在 [UI 框架组件](/zh-cn/core-concepts/framework-components/)(例如 React、Svelte)中添加图像时,请使用适合该框架的图像语法。



## 存放图片的位置

### `src/`

存储在 `src/`中的图像可以由组件(`.astro``.mdx`和其他 UI 框架)使用,但不能在 Markdown 文档中使用。

如果您必须使用 Markdown 文档,我们建议你将图像保存在 ['public/'](#public) 中或 [远程](#使用-cms-或-cdn-上的图片) 存储他们。

从任何组件文档中的 **相对文档路径**[导入别名](/zh-cn/guides/aliases/) 导入它们,然后像使用 `src`属性一样使用。

```astro
---
// src/pages/index.astro
// Access images in `src/images/`
import logo from '../images/logo.png';
---
<img src={logo} width="40" alt="Astro 的图标" />
```

### `public/`

存储在 `public/` 中的图像可以被组件(`.astro``.mdx`和其他UI框架)和Markdown文档使用。

然而,位于 `/public` 目录中的文件始终按原样提供或复制,不进行任何处理。如果你在 Markdown 文件之外使用图像,我们建议尽可能将本地图像保存在 `src/` 中,以便 Astro 对其进行转换、优化和打包。

`src` 属性是 **相对于 public 文件夹的**。在 Markdown 中,你可以使用 `![]()` 表示。

```astro
---
// src/pages/index.astro
// 存取放在 `public/images/` 里的图片
---
<img src="/images/logo.png" />
```

### `src/assets/` (实验性)

请参阅 [资源(实验性)](/zh-cn/guides/images/) 指南,了解如何启用 `/assets/` 文件夹的实验性用法。

这将需要你更新现有图片,删除当前的 Astro 图片集成,并且还需要额外的手动更改以利用其某些新功能。

## Astro 的图片集成

:::note[将在 v3.0 中弃用]
Astro v3 将不再主动支持 [`@astrojs/image`](https://github.com/withastro/astro/tree/main/packages/integrations/image) 集成

我们建议你尽早删除它,并使用将内置在 `astro@3.0` 中的实验性 `astro:assets` 模块。

请按照 [资源(实验性)使用指南](/zh-cn/guides/images/) 开始使用新的图片解决方案!

**`astro:assets` 目前还不能完全替代 `@astrojs/image` ,但它正在被积极开发中。**
:::

有关在 Astro v2 中使用 `@astrojs/image` 的文档,请参阅 [`@astrojs/image` 文档](https://github.com/withastro/astro/blob/main/packages/integrations/image/README.md)

## 使用 CMS 或 CDN 上的图片

Image CDN 可与 Astro 配合使用,可将图片的完整网址作为 `<img>` 标签中的 `src` 属性或 Markdown 标记

如果 CDN 提供了 Node.js SDK ,则可以在项目中使用它。例如,[Cloudinary 的 SDK](https://cloudinary.com/documentation/node_integration) 可以生成带有相应 `src` 属性 的 ` <img>` 标签。

## Alt Text

并非所有用户都能以相同的方式查看图片,因此在使用图片时可访问性是一个特别重要的问题。使用 `alt` 属性为图片提供 [描述性替代文本](https://www.w3.org/WAI/tutorials/images/)

此属性对于映像集成的 `<Image />``<Picture/>` 组件是必需的,如果未提供替代文本,这些组件将引发错误。

如果图像只是装饰性的(即无助于理解页面)请设置 `alt=""`,以便屏幕阅读器知道忽略该图像。

## 社区开发的集成

除了官方的 [`@astrojs/image`](/zh-cn/guides/integrations-guid/image/) 集成外,社区还开发了[社区图片集成](https://astro.build/integrations?search=images),用于处理和优化 Astro 项目中的图片。
2 changes: 1 addition & 1 deletion src/content/docs/ar/core-concepts/astro-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ const { title } = Astro.props

- لا يدعمون frontmatter، أو الإستيراد على جانب الخادم (Server-side imports)، أو التعابير الديناميكية.
- أي وسوم `<script>` تُركت غير مجمّعة، سيتم التعامل معها كما لو انها تحتوي على `is:inline`.
- يمكنهم فقط [إسناد الموارد الموجودة في مجلد `public/`](/ar/guides/images/#public)
- يمكنهم فقط [إسناد الموارد الموجودة في مجلد `public/`](/ar/core-concepts/project-structure/#public)

:::note
[عنصر `<slot />`](/ar/core-concepts/astro-components/#المداخل) الموجود داخل مكوّن HTML سيعمل كما يعمل في مكوّن أسترو. لإستخدام عنصر ["HTML Web Component Slot"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) بدلًا من ذلك، أضف `is:inline` إلى عنصر `<slot />` الخاص بك.
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/en/core-concepts/astro-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ Astro supports importing and using `.html` files as components or placing these
HTML components must contain only valid HTML, and therefore lack key Astro component features:
- They don't support frontmatter, server-side imports, or dynamic expressions.
- Any `<script>` tags are left unbundled, treated as if they had `is:inline`.
- They can only [reference assets that are in the `public/` folder](/en/guides/images/#public).
- They can only [reference assets that are in the `public/` folder](/en/core-concepts/project-structure/#public).

:::note
A [`<slot />` element](/en/core-concepts/astro-components/#slots) inside an HTML component will work as it would in an Astro component. In order to use the [HTML Web Component Slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) element instead, add `is:inline` to your `<slot>` element.
Expand Down
Loading