[@astrojs/image] fixes a bug in dev when <Image /> is used with no tr…

…ansformation props (#4933)

* fix: return the original file in dev if no image transforms were used

* chore: add changeset

.changeset/khaki-ghosts-fry.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Fixes a bug in dev when `<Image />` is used for a local image with no transformations

packages/integrations/image/src/vite-plugin-astro-image.ts

@@ -93,16 +93,20 @@ export function createPlugin(config: AstroConfig, options: Required<IntegrationO
  url.searchParams
  );
 
- if (!transform) {
- return next();
+ // if no transforms were added, the original file will be returned as-is
+ let data = file;
+ let format = meta.format;
+
+ if (transform) {
+ const result = await globalThis.astroImage.defaultLoader.transform(file, transform);
+ data = result.data;
+ format = result.format;
  }
 
- const result = await globalThis.astroImage.defaultLoader.transform(file, transform);
-
- res.setHeader('Content-Type', `image/${result.format}`);
+ res.setHeader('Content-Type', `image/${format}`);
  res.setHeader('Cache-Control', 'max-age=360000');
 
- const stream = Readable.from(result.data);
+ const stream = Readable.from(data);
  return stream.pipe(res);
  }
 

packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro

@@ -15,6 +15,8 @@ import { Image } from '@astrojs/image/components';
  <br />
  <Image id="social-jpg" src={socialJpg} width={506} height={253} alt="social-jpg" />
  <br />
+ <Image id="no-transforms" src={socialJpg} alt="no-transforms" />
+ <br />
  <Image id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="webp" alt="Google" />
  <br />
  <Image id="inline" src={import('../assets/social.jpg')} width={506} alt="inline" />

packages/integrations/image/test/image-ssg.test.js

@@ -28,6 +28,12 @@ describe('SSG images - dev', function () {
  url: '/@astroimage/assets/social.jpg',
  query: { f: 'jpg', w: '506', h: '253' },
  },
+ {
+ title: 'Local image no transforms',
+ id: '#no-transforms',
+ url: '/@astroimage/assets/social.jpg',
+ query: { }
+ },
  {
  title: 'Filename with spaces',
  id: '#spaces',

packages/integrations/image/test/image-ssr-dev.test.js

@@ -32,6 +32,13 @@ describe('SSR images - dev', function () {
  query: { f: 'jpg', w: '506', h: '253' },
  contentType: 'image/jpeg',
  },
+ {
+ title: 'Local image no transforms',
+ id: '#no-transforms',
+ url: '/@astroimage/assets/social.jpg',
+ query: { },
+ contentType: 'image/jpeg',
+ },
  {
  title: 'Filename with spaces',
  id: '#spaces',