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

fix(assets): Fix images from public not working with the new Assets feature (#6536)

Browse source 
* fix(assets): Fix images from public not working with <Image> and `getImage`

* test(assets): Add test for public images

* refactor: simplify logic
This commit is contained in:
Erika 2023-03-14 17:20:17 +01:00 committed by GitHub
parent 04dddd783d
commit 035c0c4df2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/stupid-lemons-boil.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix Image component and `getImage` not handling images from public correctly

14
packages/astro/src/assets/services/service.ts
View file

@ -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());

7
packages/astro/test/core-image.test.js
View file

@ -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 () => {

BIN
packages/astro/test/fixtures/core-image/public/penguin3.jpg vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

2
packages/astro/test/fixtures/core-image/src/pages/blog/[...slug].astro vendored
View file

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

4
packages/astro/test/fixtures/core-image/src/pages/index.astro vendored
View file

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