Skip to content

Commit

Permalink
[@astrojs/image] Fixes a regression in remote image filenames (#4649)
Browse files Browse the repository at this point in the history 
* fixes a bug in filename creation for remote images without a file extension

* chore: add changeset
  • Loading branch information
Tony Sullivan authored Sep 7, 2022
1 parent 6d845c3 commit db70afd
Show file tree
Hide file tree
Showing 12 changed files with 153 additions and 6 deletions.
5 changes: 5 additions & 0 deletions .changeset/swift-wolves-argue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---

Fixes a bug related to filenames for remote images in SSG builds
2 changes: 1 addition & 1 deletion packages/integrations/image/components/Image.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ interface RemoteImageProps extends TransformOptions, astroHTML.JSX.ImgHTMLAttrib
src: string;
/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
alt: string;
format: OutputFormat;
format?: OutputFormat;
width: number;
height: number;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/integrations/image/src/lib/get-picture.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ async function resolveFormats({ src, formats }: GetPictureParams) {
unique.add(extname(metadata.src).replace('.', '') as OutputFormat);
}

return [...unique];
return Array.from(unique).filter(Boolean);
}

export async function getPicture(params: GetPictureParams): Promise<GetPictureResult> {
Expand Down
7 changes: 4 additions & 3 deletions packages/integrations/image/src/utils/paths.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function extname(src: string, format?: OutputFormat) {
const index = src.lastIndexOf('.');

if (index <= 0) {
return undefined;
return '';
}

return src.substring(index);
Expand All @@ -38,11 +38,12 @@ export function propsToFilename(transform: TransformOptions) {
// strip off the querystring first, then remove the file extension
let filename = removeQueryString(transform.src);
filename = basename(filename);
const ext = extname(filename);
filename = removeExtname(filename);

const ext = transform.format || extname(transform.src)?.substring(1);
const outputExt = transform.format ? `.${transform.format}` : ext

return `/${filename}_${shorthash(JSON.stringify(transform))}.${ext}`;
return `/${filename}_${shorthash(JSON.stringify(transform))}${outputExt}`;
}

export function appendForwardSlash(path: string) {
Expand Down
2 changes: 2 additions & 0 deletions packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,7 @@ import { Image } from '@astrojs/image/components';
<Image id="inline" src={import('../assets/social.jpg')} width={506} alt="inline" />
<br />
<Image id="query" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?token=abc" width={544} height={184} format="webp" alt="query" />
<br />
<Image id="ipsum" src="https://picsum.photos/200/300" width={200} height={300} alt="ipsum" format="jpeg" />
</body>
</html>
4 changes: 3 additions & 1 deletion 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 @@ -12,8 +12,10 @@ import { Picture } from '@astrojs/image/components';
<br />
<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} alt="Google logo" />
<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" formats={["avif", "webp", "png"]} />
<br />
<Picture id='inline' src={import('../assets/social.jpg')} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Inline social image" />
<br />
<Picture id="ipsum" src="https://picsum.photos/200/300" sizes="100vw" widths={[100, 200]} aspectRatio={2/3} formats={["avif", "webp", "jpg"]} alt="ipsum" />
</body>
</html>
33 changes: 33 additions & 0 deletions packages/integrations/image/test/image-ssg.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,16 @@ describe('SSG images - dev', function () {
href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
},
},
{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300'
}
},
{
title: 'Public images',
id: '#hero',
Expand Down Expand Up @@ -120,6 +130,17 @@ describe('SSG images with subpath - dev', function () {
href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
},
},

{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300'
}
},
{
title: 'Public images',
id: '#hero',
Expand Down Expand Up @@ -189,6 +210,12 @@ describe('SSG images - build', function () {
regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
},
{
title: 'Public images',
id: '#hero',
Expand Down Expand Up @@ -253,6 +280,12 @@ describe('SSG images with subpath - build', function () {
regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/docs\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
},
{
title: 'Public images',
id: '#hero',
Expand Down
20 changes: 20 additions & 0 deletions packages/integrations/image/test/image-ssr-build.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,16 @@ describe('SSR images - build', async function () {
href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
},
},
{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
},
{
title: 'Remote images with search',
id: '#query',
Expand Down Expand Up @@ -139,6 +149,16 @@ describe('SSR images with subpath - build', function () {
href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
},
},
{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
},
{
title: 'Remote images with search',
id: '#query',
Expand Down
22 changes: 22 additions & 0 deletions packages/integrations/image/test/image-ssr-dev.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,17 @@ describe('SSR images - dev', function () {
},
contentType: 'image/webp',
},
{
title: 'Remote wihtout file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
contentType: 'image/jpeg',
},
{
title: 'Public images',
id: '#hero',
Expand Down Expand Up @@ -149,6 +160,17 @@ describe('SSR images with subpath - dev', function () {
},
contentType: 'image/webp',
},
{
title: 'Remote wihtout file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
contentType: 'image/jpeg',
},
{
title: 'Public images',
id: '#hero',
Expand Down
14 changes: 14 additions & 0 deletions packages/integrations/image/test/picture-ssg.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,13 @@ describe('SSG pictures - build', function () {
size: { width: 544, height: 184, type: 'png' },
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
Expand Down Expand Up @@ -288,6 +295,13 @@ describe('SSG pictures with subpath - build', function () {
size: { width: 544, height: 184, type: 'png' },
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/docs\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
Expand Down
22 changes: 22 additions & 0 deletions packages/integrations/image/test/picture-ssr-build.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,17 @@ describe('SSR pictures - build', function () {
},
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
Expand Down Expand Up @@ -122,6 +133,17 @@ describe('SSR pictures with subpath - build', function () {
},
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
Expand Down
26 changes: 26 additions & 0 deletions packages/integrations/image/test/picture-ssr-dev.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,19 @@ describe('SSR pictures - dev', function () {
contentType: 'image/png',
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
f: 'jpg',
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
contentType: 'image/jpeg',
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
Expand Down Expand Up @@ -148,6 +161,19 @@ describe('SSR pictures with subpath - dev', function () {
contentType: 'image/png',
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
url: '/_image',
query: {
f: 'jpg',
w: '200',
h: '300',
href: 'https://picsum.photos/200/300',
},
contentType: 'image/jpeg',
alt: 'ipsum',
},,
{
title: 'Public images',
id: '#hero',
Expand Down

0 comments on commit db70afd

Please sign in to comment.