rsnext/examples/image-legacy-component/pages/layout-responsive.tsx

import Image from 'next/legacy/image'
import ViewSource from '../components/view-source'
import mountains from '../public/mountains.jpg'

const Responsive = () => (
  <div>
    <ViewSource pathname="pages/layout-responsive.tsx" />
    <h1>Image Component With Layout Responsive</h1>
    <Image
      alt="Mountains"
      src={mountains}
      layout="responsive"
      width={700}
      height={475}
    />
  </div>
)

export default Responsive
Update `next/image` docs and examples (#41434) This PR updates the docs for the following code change: - #41399 There are a few updates here: - [x] Update docs - [x] Update links to docs inside component - [x] Update examples - [x] Fix corner cases in codemod 2022-10-17 16:41:35 +02:00			`import Image from 'next/legacy/image'`
Update image example with link back to source code (#18909) Fixes #18908 2020-11-06 23:13:01 +01:00			`import ViewSource from '../components/view-source'`
Modify image component examples app for static image (#25956) Some fairly minor changes to the image-component example app. Switches all instances of images from `/public` over to use static images and adds a page with an example image with blurry placeholder enabled. 2021-06-10 00:48:31 +02:00			`import mountains from '../public/mountains.jpg'`
Update example for Image Component (#18762) 2020-11-03 21:40:53 +01:00
			`const Responsive = () => (`
			`<div>`
[Docs] Migrate image-component example to typescript (#40204) <!-- Thanks for opening a PR! Your contribution is much appreciated. In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change that you're making: --> @styfle as suggested here the TS PR. > I suggest creating the first PR that is just JS => TS. > > The create a second PR that makes style changes. > ## Changelog - Update react - Migrated to typescript ## Related https://github.com/vercel/next.js/pull/40153 ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) 2022-09-05 18:28:23 +02:00			`<ViewSource pathname="pages/layout-responsive.tsx" />`
Update example for Image Component (#18762) 2020-11-03 21:40:53 +01:00			`<h1>Image Component With Layout Responsive</h1>`
			`<Image`
			`alt="Mountains"`
Modify image component examples app for static image (#25956) Some fairly minor changes to the image-component example app. Switches all instances of images from `/public` over to use static images and adds a page with an example image with blurry placeholder enabled. 2021-06-10 00:48:31 +02:00			`src={mountains}`
Update example for Image Component (#18762) 2020-11-03 21:40:53 +01:00			`layout="responsive"`
			`width={700}`
			`height={475}`
			`/>`
			`</div>`
			`)`

			`export default Responsive`