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.

Sign up for GitHub

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

<Picture> component should pass all unknown attributes to the <img> element #3961

Merged
merged 7 commits into from
Jul 19, 2022
Merged

<Picture> component should pass all unknown attributes to the <img> element #3961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ce3e339
<Picture /> should pass all unrecognized props down to the <img> element
Jul 18, 2022
6857dd9
chore: add changeset
Jul 18, 2022
0b26432
Adding test coverage for custom <img> attributes
Jul 18, 2022
da0f280
chore: adding a README note for passing attributes to the picture's img
Jul 18, 2022
ef430f2
Revert "<Picture /> should pass all unrecognized props down to the <i…
Jul 19, 2022
7369cf0
Picture should pass alt text to the img
Jul 19, 2022
ab6a569
Merge branch 'main' into feat/picture-attributes
Jul 19, 2022
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
5 changes: 5 additions & 0 deletions .changeset/chatty-bikes-sin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---

Updates the <Picture /> component to pass the `alt` attribute down to the <img> element
6 changes: 3 additions & 3 deletions packages/integrations/image/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,13 +188,13 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog
---

// Local image with multiple sizes
<Picture src={hero} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" />
<Picture src={hero} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="My hero image" />

// Remote image (aspect ratio is required)
<Picture src={imageUrl} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" />
<Picture src={imageUrl} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="My hero image" />

// Inlined imports are supported
<Picture src={import("../assets/hero.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" />
<Picture src={import("../assets/hero.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="My hero image" />
```

</details>
Expand Down
10 changes: 6 additions & 4 deletions packages/integrations/image/components/Picture.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,17 @@ import loader from 'virtual:image-loader';
import { getPicture } from '../src/get-picture.js';
import type { ImageAttributes, ImageMetadata, OutputFormat, PictureAttributes, TransformOptions } from '../src/types.js';

export interface LocalImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
export interface LocalImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, Omit<TransformOptions, 'src'>, Pick<ImageAttributes, 'loading' | 'decoding'> {
src: ImageMetadata | Promise<{ default: ImageMetadata }>;
alt?: string;
sizes: HTMLImageElement['sizes'];
widths: number[];
formats?: OutputFormat[];
}

export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, TransformOptions, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, TransformOptions, Pick<ImageAttributes, 'loading' | 'decoding'> {
src: string;
alt?: string;
sizes: HTMLImageElement['sizes'];
widths: number[];
aspectRatio: TransformOptions['aspectRatio'];
Expand All @@ -21,15 +23,15 @@ export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width

export type Props = LocalImageProps | RemoteImageProps;

const { src, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = 'lazy', decoding = 'async', ...attrs } = Astro.props as Props;
const { src, alt, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = 'lazy', decoding = 'async', ...attrs } = Astro.props as Props;

const { image, sources } = await getPicture({ loader, src, widths, formats, aspectRatio });
---

<picture {...attrs}>
{sources.map(attrs => (
<source {...attrs} {sizes}>))}
<img {...image} {loading} {decoding} />
<img {...image} {loading} {decoding} {alt} />
</picture>

<style>
Expand Down
6 changes: 3 additions & 3 deletions packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import { Picture } from '@astrojs/image';
<!-- Head Stuff -->
</head>
<body>
<Picture id="social-jpg" src={socialJpg} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} />
<Picture id="social-jpg" src={socialJpg} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Social image" />
<br />
<Picture id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} />
<Picture id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" />
<br />
<Picture id='inline' src={import('../assets/social.jpg')} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} />
<Picture id='inline' src={import('../assets/social.jpg')} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Inline social image" />
</body>
</html>
18 changes: 12 additions & 6 deletions packages/integrations/image/test/picture-ssg.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,13 @@ describe('SSG pictures', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
it('includes <img> attributes', () => {
const image = $('#social-jpg img');

expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
expect(image.attr('width')).to.equal('506');
expect(image.attr('height')).to.equal('253');
expect(image.attr('alt')).to.equal('Social image');
});

it('built the optimized image', () => {
Expand All @@ -72,12 +73,13 @@ describe('SSG pictures', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
it('includes <img> attributes', () => {
const image = $('#inline img');

expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
expect(image.attr('width')).to.equal('506');
expect(image.attr('height')).to.equal('253');
expect(image.attr('alt')).to.equal('Inline social image');
});

it('built the optimized image', () => {
Expand All @@ -103,12 +105,13 @@ describe('SSG pictures', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
it('includes <img> attributes', () => {
const image = $('#google img');

expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.png`);
expect(image.attr('width')).to.equal('544');
expect(image.attr('height')).to.equal('184');
expect(image.attr('alt')).to.equal('Google logo');
});

it('built the optimized image', () => {
Expand Down Expand Up @@ -169,7 +172,7 @@ describe('SSG pictures', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
it('includes <img> attributes', () => {
const image = $('#social-jpg img');

const src = image.attr('src');
Expand All @@ -184,6 +187,7 @@ describe('SSG pictures', function () {
expect(searchParams.get('h')).to.equal('253');
// TODO: possible to avoid encoding the full image path?
expect(searchParams.get('href').endsWith('/assets/social.jpg')).to.equal(true);
expect(image.attr('alt')).to.equal('Social image');
});

it('returns the optimized image', async () => {
Expand All @@ -207,7 +211,7 @@ describe('SSG pictures', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
it('includes <img> attributes', () => {
const image = $('#inline img');

const src = image.attr('src');
Expand All @@ -222,6 +226,7 @@ describe('SSG pictures', function () {
expect(searchParams.get('h')).to.equal('253');
// TODO: possible to avoid encoding the full image path?
expect(searchParams.get('href').endsWith('/assets/social.jpg')).to.equal(true);
expect(image.attr('alt')).to.equal('Inline social image');
});

it('returns the optimized image', async () => {
Expand All @@ -245,7 +250,7 @@ describe('SSG pictures', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', () => {
it('includes <img> attributes', () => {
const image = $('#google img');

const src = image.attr('src');
Expand All @@ -261,6 +266,7 @@ describe('SSG pictures', function () {
expect(searchParams.get('href')).to.equal(
'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
);
expect(image.attr('alt')).to.equal('Google logo');
});
});
});
Expand Down
12 changes: 9 additions & 3 deletions packages/integrations/image/test/picture-ssr.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe('SSR pictures - build', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', async () => {
it('includes <img> attributes', async () => {
const app = await fixture.loadTestAdapterApp();

const request = new Request('http://example.com/');
Expand All @@ -55,6 +55,7 @@ describe('SSR pictures - build', function () {
expect(searchParams.get('h')).to.equal('253');
// TODO: possible to avoid encoding the full image path?
expect(searchParams.get('href').endsWith('/assets/social.jpg')).to.equal(true);
expect(image.attr('alt')).to.equal('Social image');
});

// TODO: Track down why the fixture.fetch is failing with the test adapter
Expand Down Expand Up @@ -93,7 +94,7 @@ describe('SSR pictures - build', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', async () => {
it('includes <img> attributes', async () => {
const app = await fixture.loadTestAdapterApp();

const request = new Request('http://example.com/');
Expand All @@ -115,6 +116,7 @@ describe('SSR pictures - build', function () {
expect(searchParams.get('h')).to.equal('253');
// TODO: possible to avoid encoding the full image path?
expect(searchParams.get('href').endsWith('/assets/social.jpg')).to.equal(true);
expect(image.attr('alt')).to.equal('Inline social image');
});
});

Expand All @@ -134,7 +136,7 @@ describe('SSR pictures - build', function () {
// TODO: better coverage to verify source props
});

it('includes src, width, and height attributes', async () => {
it('includes <img> attributes', async () => {
const app = await fixture.loadTestAdapterApp();

const request = new Request('http://example.com/');
Expand All @@ -156,6 +158,7 @@ describe('SSR pictures - build', function () {
expect(searchParams.get('h')).to.equal('184');
// TODO: possible to avoid encoding the full image path?
expect(searchParams.get('href').endsWith('googlelogo_color_272x92dp.png')).to.equal(true);
expect(image.attr('alt')).to.equal('Google logo');
});
});
});
Expand Down Expand Up @@ -207,6 +210,7 @@ describe('SSR images - dev', function () {
expect(searchParams.get('h')).to.equal('253');
// TODO: possible to avoid encoding the full image path?
expect(searchParams.get('href').endsWith('/assets/social.jpg')).to.equal(true);
expect(image.attr('alt')).to.equal('Social image');
});

it('returns the optimized image', async () => {
Expand Down Expand Up @@ -245,6 +249,7 @@ describe('SSR images - dev', function () {
expect(searchParams.get('h')).to.equal('253');
// TODO: possible to avoid encoding the full image path?
expect(searchParams.get('href').endsWith('/assets/social.jpg')).to.equal(true);
expect(image.attr('alt')).to.equal('Inline social image');
});
});

Expand Down Expand Up @@ -273,6 +278,7 @@ describe('SSR images - dev', function () {
expect(searchParams.get('href')).to.equal(
'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
);
expect(image.attr('alt')).to.equal('Google logo');
});
});
});