diff options
| -rw-r--r-- | .changeset/stupid-lemons-boil.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/assets/services/service.ts | 14 | ||||
| -rw-r--r-- | packages/astro/test/core-image.test.js | 7 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/core-image/public/penguin3.jpg | bin | 0 -> 12978 bytes | |||
| -rw-r--r-- | packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro | 2 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/core-image/src/pages/index.astro | 4 |
6 files changed, 21 insertions, 11 deletions
diff --git a/.changeset/stupid-lemons-boil.md b/.changeset/stupid-lemons-boil.md new file mode 100644 index 000000000..ce334e875 --- /dev/null +++ b/.changeset/stupid-lemons-boil.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix Image component and `getImage` not handling images from public correctly diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts index 1af8360da..bb320da05 100644 --- a/packages/astro/src/assets/services/service.ts +++ b/packages/astro/src/assets/services/service.ts @@ -1,5 +1,4 @@ import { AstroError, AstroErrorData } from '../../core/errors/index.js'; -import { isRemotePath } from '../../core/path.js'; import { VALID_INPUT_FORMATS } from '../consts.js'; import { isESMImportedImage } from '../internal.js'; import type { ImageTransform, OutputFormat } from '../types.js'; @@ -125,7 +124,7 @@ export const baseService: Omit<LocalImageService, 'transform'> = { }, getURL(options: ImageTransform) { if (!isESMImportedImage(options.src)) { - // For non-ESM imported images, width and height are required to avoid CLS, as we can't infer them from the file + // For remote images, width and height are explicitly required as we can't infer them from the file let missingDimension: 'width' | 'height' | 'both' | undefined; if (!options.width && !options.height) { missingDimension = 'both'; @@ -141,17 +140,12 @@ export const baseService: Omit<LocalImageService, 'transform'> = { message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src), }); } - } - // Both our currently available local services don't handle remote images, so for them we can just return as is - if (!isESMImportedImage(options.src) && isRemotePath(options.src)) { + // Both our currently available local services don't handle remote images, so we return the path as is. return options.src; } - if ( - isESMImportedImage(options.src) && - !VALID_INPUT_FORMATS.includes(options.src.format as any) - ) { + if (!VALID_INPUT_FORMATS.includes(options.src.format as any)) { throw new AstroError({ ...AstroErrorData.UnsupportedImageFormat, message: AstroErrorData.UnsupportedImageFormat.message( @@ -163,7 +157,7 @@ export const baseService: Omit<LocalImageService, 'transform'> = { } const searchParams = new URLSearchParams(); - searchParams.append('href', isESMImportedImage(options.src) ? options.src.src : options.src); + searchParams.append('href', options.src.src); options.width && searchParams.append('w', options.width.toString()); options.height && searchParams.append('h', options.height.toString()); diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 2eb905d94..59003024f 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -142,6 +142,13 @@ describe('astro:image', () => { expect(!!$img.attr('width')).to.equal(true); expect(!!$img.attr('height')).to.equal(true); }); + + it('support images from public', () => { + let $img = $('#public img'); + expect($img.attr('src')).to.equal('/penguin3.jpg'); + expect(!!$img.attr('width')).to.equal(true); + expect(!!$img.attr('height')).to.equal(true); + }); }); it('error if no width and height', async () => { diff --git a/packages/astro/test/fixtures/core-image/public/penguin3.jpg b/packages/astro/test/fixtures/core-image/public/penguin3.jpg Binary files differnew file mode 100644 index 000000000..db6c44709 --- /dev/null +++ b/packages/astro/test/fixtures/core-image/public/penguin3.jpg diff --git a/packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro b/packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro index b96679688..b2ccdaeee 100644 --- a/packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro +++ b/packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro @@ -11,7 +11,7 @@ export async function getStaticPaths() { const { entry } = Astro.props; const { Content } = await entry.render(); -const myImage = await getImage(entry.data.image); +const myImage = await getImage({src: entry.data.image}); --- <html> <head> diff --git a/packages/astro/test/fixtures/core-image/src/pages/index.astro b/packages/astro/test/fixtures/core-image/src/pages/index.astro index 565aa5ab1..426e1706f 100644 --- a/packages/astro/test/fixtures/core-image/src/pages/index.astro +++ b/packages/astro/test/fixtures/core-image/src/pages/index.astro @@ -30,5 +30,9 @@ import myImage from "../assets/penguin1.jpg"; <div id="data-uri"> <Image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAA2gAwAEAAAAAQAAAA0AAAAAWvB1rQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDYuMC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KGV7hBwAAAWJJREFUKBVtUDEsQ1EUve+1/SItKYMIkYpF06GJdGAwNFFGkxBEYupssRm6EpvJbpVoYhRd6FBikDSxYECsBpG25D/nvP/+p+Ik551z73v33feuyA/izq5CL8ET8ALcBolYIP+vd0ibX/yAT7uj2qkVzwWzUBa0nbacbkKJHi5dlYhXmARYeAS+MwCWA5FPqKIP/9IH/wiygMru5y5mcRYkPHYKP7gAPw4SDbCjRXMgRBJctM4t4ROriM2QSpmkeOtub6YfMYrZvelykbD1sxJVg+6AfKqURRKQLfA4JvoVWgIjDMNlGLVKZxNRFsZsoHGAgREZHKPlJEi2t7if3r2KKS9nVOo0rtNZ3yR7M/VGTqTy5Y4o/scWHBbKfIq0/eZ+x3850OZpaTTxlu/4D3ssuA72uxrYS2rFYjh+aRbmb24LpTVu1IqVKG8P/lmUEaNMxeh6fmquOhkMBE8JJ2yPfwPjdVhiDbiX6AAAAABJRU5ErkJggg==" alt="Astro logo" width="16" height="16" /> </div> + + <div id="public"> + <Image src="/penguin3.jpg" width={400} height={400} alt="..." /> + </div> </body> </html> |
