mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
d796c0f209
[flakiness metric](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20%40git.repository.id%3A%22github.com%2Fvercel%2Fnext.js%22%20%40test.name%3A%22Static%20Image%20Component%20Tests%20development%20mode%20Should%20allow%20an%20image%20with%20a%20static%20src%20to%20omit%20height%20and%20width%22%20%40test.type%3A%22turbopack%22%20%40test.status%3A%22fail%22&agg_m=count&agg_m_source=base&agg_t=count¤tTab=overview&eventStack=&fromUser=false&index=citest&start=1759057503838&end=1759662303838&paused=false) I suspect that the test `Should allow an image with a static src to omit height and width` is frequently failing with `waiting for locator('#basic-static') to be visible` because the image is covered by one of the images with a `fill` prop, which are rendered later in the page. This means that the image is not actually visible, even though it is in the DOM. Playwright then fails to find it. However, I wasn't able to reproduce this locally. The fix is to wrap the `fill` images in a relatively positioned div with a set height, so that they don't cover the other images. **Before:** <img width="490" height="894" alt="before" src="https://github.com/user-attachments/assets/7632dc67-a649-42b7-8b62-a9a216632ec2" /> **After:** <img width="490" height="894" alt="after" src="https://github.com/user-attachments/assets/2d369e4d-ef08-47cc-bdc4-04ab94afcceb" /> --------- Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
146 lines
5.1 KiB
JavaScript
146 lines
5.1 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/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 widePNG from '../public/wide.png'
|
|
import tallPNG from '../components/tall.png'
|
|
import superWidePNG from '../public/super-wide.png'
|
|
|
|
import TallImage from '../components/TallImage'
|
|
|
|
const blurDataURL =
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNM/s/wBwAFjwJgf8HDLgAAAABJRU5ErkJggg=='
|
|
const shimmer = `data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMzMzIiBvZmZzZXQ9IjIwJSIgLz4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzIyMiIgb2Zmc2V0PSI1MCUiIC8+CiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzMzMiIG9mZnNldD0iNzAlIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbGw9IiMzMzMiIC8+CiAgPHJlY3QgaWQ9InIiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiBmaWxsPSJ1cmwoI2cpIiAvPgogIDxhbmltYXRlIHhsaW5rOmhyZWY9IiNyIiBhdHRyaWJ1dGVOYW1lPSJ4IiBmcm9tPSItMjAwIiB0bz0iMjAwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+Cjwvc3ZnPg==`
|
|
|
|
export const getStaticProps = () => ({
|
|
props: { testImgProp },
|
|
})
|
|
|
|
function FillContainer({ children }) {
|
|
// Optimized to accept the square test images. Subtracting 16px to account for
|
|
// the default 8px body margin.
|
|
return (
|
|
<div style={{ position: 'relative', height: 'calc(100vw - 16px)' }}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Page = ({ testImgProp }) => {
|
|
return (
|
|
<div>
|
|
<h1 id="page-header">Static Image</h1>
|
|
<Image id="basic-static" src={testImg} placeholder="blur" priority />
|
|
<Image id="basic-staticprop" src={testImgProp} placeholder="blur" />
|
|
<TallImage />
|
|
<Image
|
|
id="defined-width-and-height"
|
|
src={testPNG}
|
|
height="150"
|
|
width="150"
|
|
/>
|
|
<Image id="defined-height-only" src={widePNG} height="350" />
|
|
<Image id="defined-width-only" src={widePNG} width="400" />
|
|
<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="blur-wide" src={widePNG} placeholder="blur" />
|
|
<Image id="blur-tall" src={tallPNG} placeholder="blur" />
|
|
<Image
|
|
id="blur-super-wide"
|
|
src={superWidePNG}
|
|
placeholder="blur"
|
|
width={72}
|
|
height={16}
|
|
/>
|
|
<Image
|
|
id="blur-super-tall"
|
|
src={superWidePNG}
|
|
placeholder="blur"
|
|
width={16}
|
|
height={72}
|
|
/>
|
|
<br />
|
|
<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 />
|
|
<FillContainer>
|
|
<Image id="static-svg-fill" src={testSVG} fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="static-gif-fill" src={testGIF} fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="static-bmp-fill" src={testBMP} fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="static-ico-fill" src={testICO} fill />
|
|
</FillContainer>
|
|
<br />
|
|
<FillContainer>
|
|
<Image id="blur-png-fill" src={testPNG} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="blur-jpg-fill" src={testJPG} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="blur-webp-fill" src={testWEBP} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<FillContainer>
|
|
<Image id="blur-avif-fill" src={testAVIF} placeholder="blur" fill />
|
|
</FillContainer>
|
|
<br />
|
|
<FillContainer>
|
|
<Image
|
|
id="blurdataurl-fill"
|
|
src="/test.jpg"
|
|
placeholder="blur"
|
|
blurDataURL={blurDataURL}
|
|
fill
|
|
/>
|
|
</FillContainer>
|
|
<Image
|
|
id="blurdataurl-ratio"
|
|
src="/test.png"
|
|
placeholder="blur"
|
|
blurDataURL={blurDataURL}
|
|
width="100"
|
|
height="200"
|
|
/>
|
|
<br />
|
|
<Image id="static-unoptimized" src={testJPG} unoptimized />
|
|
<br />
|
|
<Image
|
|
id="data-url-placeholder"
|
|
src={testImg}
|
|
placeholder={shimmer}
|
|
width="200"
|
|
height="200"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page
|