Skip to content

Commit

Permalink
<Picture> component should pass all unknown attributes to the <img> e…
Browse files Browse the repository at this point in the history 
…lement (#3961)

* <Picture /> should pass all unrecognized props down to the <img> element

* chore: add changeset

* Adding test coverage for custom <img> attributes

* chore: adding a README note for passing attributes to the picture's img

* Revert "<Picture /> should pass all unrecognized props down to the <img> element"

This reverts commit ce3e339.

* Picture should pass alt text to the img
  • Loading branch information
Tony Sullivan authored Jul 19, 2022
1 parent b37d707 commit d73c04a
Show file tree
Hide file tree
Showing 6 changed files with 38 additions and 19 deletions.
5 changes: 5 additions & 0 deletions .changeset/chatty-bikes-sin.md
View file
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
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
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
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
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
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');
});
});
});

0 comments on commit d73c04a

Please sign in to comment.