michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[@astrojs/image] Fixes a regression in remote image filenames (#4649)

Browse source 
* fixes a bug in filename creation for remote images without a file extension

* chore: add changeset
This commit is contained in:
Tony Sullivan 2022-09-07 13:56:07 +00:00 committed by GitHub
parent 6d845c353d
commit db70afdcd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 153 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/swift-wolves-argue.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---
Fixes a bug related to filenames for remote images in SSG builds

2
packages/integrations/image/components/Image.astro
View file

@ -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;
}

2
packages/integrations/image/src/lib/get-picture.ts
View file

@ -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> {

7
packages/integrations/image/src/utils/paths.ts
View file

@ -14,7 +14,7 @@ function extname(src: string, format?: OutputFormat) {
const index = src.lastIndexOf('.');
if (index <= 0) {
return undefined;
return '';
}
return src.substring(index);
@ -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) {

2
packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro vendored
View file

@ -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
packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro vendored
View file

@ -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
packages/integrations/image/test/image-ssg.test.js
View file

@ -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',
@ -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',
@ -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',
@ -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',

20
packages/integrations/image/test/image-ssr-build.test.js
View file

@ -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',
@ -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',

22
packages/integrations/image/test/image-ssr-dev.test.js
View file

@ -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',
@ -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',

14
packages/integrations/image/test/picture-ssg.test.js
View file

@ -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',
@ -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',

22
packages/integrations/image/test/picture-ssr-build.test.js
View file

@ -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',
@ -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',

26
packages/integrations/image/test/picture-ssr-dev.test.js
View file

@ -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',
@ -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',