mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
369d6b76c4
In #41548, I show that I would like to provide an object with images in getStaticProps. The StaticImageData is parsed correctly and provided as a prop to the page. Nonetheless, the image is not available in the static directory. Therefore the image is not shown. This is also addressed in issue #29571. The underlying cause is that the import of the image is removed from the client bundle and only present in the server bundle. Evaluating the next-image-loader shows that the file is only placed in the static directory if emitted from the client bundle by firing this.emitFile. By changing this to only emitting the file from the serverside bundle in the webpackloader, static images loaded in the getStaticProps are made available properly as well as images directly used in componts (so present in server and client bundle). This would PR would prevent the circumventing solution which enforces that the StaticImageData should be present in the client side bundle while it will also be present in the staticprops. <!-- Thanks for opening a PR! Your contribution is much appreciated. 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: --> ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` Closes #42783, Fixes #42443 Co-authored-by: Diederik <[email protected]>
68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import testImg from '../public/foo/test-rect.jpg'
|
|
import testImgProp from '../public/exif-rotation.jpg'
|
|
import Image from 'next/legacy/image'
|
|
|
|
import testJPG from '../public/test.jpg'
|
|
import testPNG from '../public/test.png'
|
|
import testWEBP from '../public/test.webp'
|
|
import testAVIF from '../public/test.avif'
|
|
import testSVG from '../public/test.svg'
|
|
import testGIF from '../public/test.gif'
|
|
import testBMP from '../public/test.bmp'
|
|
import testICO from '../public/test.ico'
|
|
|
|
import TallImage from '../components/TallImage'
|
|
|
|
export const getStaticProps = () => ({
|
|
props: { testImgProp },
|
|
})
|
|
|
|
const Page = ({ testImgProp }) => {
|
|
return (
|
|
<div>
|
|
<h1 id="page-header">Static Image</h1>
|
|
<Image
|
|
id="basic-static"
|
|
src={testImg}
|
|
layout="fixed"
|
|
placeholder="blur"
|
|
/>
|
|
<Image
|
|
id="basic-staticprop"
|
|
src={testImgProp}
|
|
layout="fixed"
|
|
placeholder="blur"
|
|
/>
|
|
<TallImage />
|
|
<Image
|
|
id="defined-size-static"
|
|
src={testPNG}
|
|
layout="fixed"
|
|
height="200"
|
|
width="200"
|
|
/>
|
|
<Image id="require-static" src={require('../public/foo/test-rect.jpg')} />
|
|
<Image
|
|
id="basic-non-static"
|
|
src="/test-rect.jpg"
|
|
width="400"
|
|
height="300"
|
|
/>
|
|
<br />
|
|
<Image id="blur-png" src={testPNG} placeholder="blur" />
|
|
<Image id="blur-jpg" src={testJPG} placeholder="blur" />
|
|
<Image id="blur-webp" src={testWEBP} placeholder="blur" />
|
|
<Image id="blur-avif" src={testAVIF} placeholder="blur" />
|
|
<Image id="static-svg" src={testSVG} />
|
|
<Image id="static-gif" src={testGIF} />
|
|
<Image id="static-bmp" src={testBMP} />
|
|
<Image id="static-ico" src={testICO} />
|
|
<br />
|
|
<Image id="static-unoptimized" src={testJPG} unoptimized />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page
|