diff options
| -rw-r--r-- | .changeset/pretty-rats-yawn.md | 6 | ||||
| -rw-r--r-- | packages/integrations/image/README.md | 24 | ||||
| -rw-r--r-- | packages/integrations/image/components/index.js (renamed from packages/integrations/image/components/index.ts) | 0 |
3 files changed, 30 insertions, 0 deletions
diff --git a/.changeset/pretty-rats-yawn.md b/.changeset/pretty-rats-yawn.md new file mode 100644 index 000000000..aad63ee7b --- /dev/null +++ b/.changeset/pretty-rats-yawn.md @@ -0,0 +1,6 @@ +--- +'@astrojs/image': patch +--- + +- Updates how the `<Image />` component is exported to support older versions of Astro +- Adds an example of using the `<Image />` component in markdown pages
\ No newline at end of file diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index f37013b43..88f8f1900 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -152,6 +152,30 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog ``` </details> +<details> +<summary><strong>Images in markdown</strong></summary> + + <br/> + + The `<Image />` component can also be used to optimize images in markdown pages. For local images imported from your project's `src` directory, use Astro's the `setup` frontmatter to import the image file. + +```html +--- +setup: | + import { Image } from '@astrojs/image/components' + import hero from '../../assets/blog/introducing-astro.jpg' +title: Hello world! +publishDate: 12 Sep 2021 +name: Nate Moore +value: 128 +description: Just a Hello World Post! +--- + +<Image src={hero} width={640} /> +<Image src="https://example.com/image.jpg" width={640} aspectRatio="16:9" /> +``` +</details> + ## Troubleshooting - If your installation doesn't seem to be working, make sure to restart the dev server. - If you edit and save a file and don't see your site update accordingly, try refreshing the page. diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.js index fa9809650..fa9809650 100644 --- a/packages/integrations/image/components/index.ts +++ b/packages/integrations/image/components/index.js |