diff options
19 files changed, 232 insertions, 8 deletions
diff --git a/.changeset/thick-penguins-turn.md b/.changeset/thick-penguins-turn.md new file mode 100644 index 000000000..7ee77abfa --- /dev/null +++ b/.changeset/thick-penguins-turn.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix images not having the proper path when using `base` diff --git a/packages/astro/src/assets/internal.ts b/packages/astro/src/assets/internal.ts index 954347e1b..db02b1ea1 100644 --- a/packages/astro/src/assets/internal.ts +++ b/packages/astro/src/assets/internal.ts @@ -1,6 +1,8 @@ import fs from 'node:fs'; +import { basename, join } from 'node:path/posix'; import type { StaticBuildOptions } from '../core/build/types.js'; import { AstroError, AstroErrorData } from '../core/errors/index.js'; +import { prependForwardSlash } from '../core/path.js'; import { isLocalService, type ImageService, type LocalImageService } from './services/service.js'; import type { ImageMetadata, ImageTransform } from './types.js'; @@ -104,8 +106,19 @@ export async function generateImage( clientRoot = buildOpts.settings.config.outDir; } - const fileData = await fs.promises.readFile(new URL('.' + options.src.src, serverRoot)); - const resultData = await imageService.transform(fileData, { ...options, src: options.src.src }); + // The original file's path (the `src` attribute of the ESM imported image passed by the user) + const originalImagePath = options.src.src; + + const fileData = await fs.promises.readFile( + new URL( + '.' + + prependForwardSlash( + join(buildOpts.settings.config.build.assets, basename(originalImagePath)) + ), + serverRoot + ) + ); + const resultData = await imageService.transform(fileData, { ...options, src: originalImagePath }); const finalFileURL = new URL('.' + filepath, clientRoot); const finalFolderURL = new URL('./', finalFileURL); diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index 638fa9149..b42d71487 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -167,16 +167,12 @@ export default function assets({ } filePath = prependForwardSlash( - joinPaths( - settings.config.base, - settings.config.build.assets, - propsToFilename(options) - ) + joinPaths(settings.config.build.assets, propsToFilename(options)) ); globalThis.astroAsset.staticImages.set(options, filePath); } - return filePath; + return prependForwardSlash(joinPaths(settings.config.base, filePath)); }; }, async buildEnd() { diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index ccbd5b2f8..997c9c10d 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -292,6 +292,59 @@ describe('astro:image', () => { }); }); + describe('support base option correctly', () => { + before(async () => { + fixture = await loadFixture({ + root: './fixtures/core-image-base/', + experimental: { + assets: true, + }, + base: '/blog', + }); + await fixture.build(); + }); + + it('has base path prefix when using the Image component', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + const src = $('#local img').attr('src'); + expect(src.length).to.be.greaterThan(0); + expect(src.startsWith('/blog')).to.be.true; + }); + + it('has base path prefix when using getImage', async () => { + const html = await fixture.readFile('/get-image/index.html'); + const $ = cheerio.load(html); + const src = $('img').attr('src'); + expect(src.length).to.be.greaterThan(0); + expect(src.startsWith('/blog')).to.be.true; + }); + + it('has base path prefix when using image directly', async () => { + const html = await fixture.readFile('/direct/index.html'); + const $ = cheerio.load(html); + const src = $('img').attr('src'); + expect(src.length).to.be.greaterThan(0); + expect(src.startsWith('/blog')).to.be.true; + }); + + it('has base path prefix in Markdown', async () => { + const html = await fixture.readFile('/post/index.html'); + const $ = cheerio.load(html); + const src = $('img').attr('src'); + expect(src.length).to.be.greaterThan(0); + expect(src.startsWith('/blog')).to.be.true; + }); + + it('has base path prefix in Content Collection frontmatter', async () => { + const html = await fixture.readFile('/blog/one/index.html'); + const $ = cheerio.load(html); + const src = $('img').attr('src'); + expect(src.length).to.be.greaterThan(0); + expect(src.startsWith('/blog')).to.be.true; + }); + }); + describe('build ssg', () => { before(async () => { fixture = await loadFixture({ diff --git a/packages/astro/test/fixtures/core-image-base/package.json b/packages/astro/test/fixtures/core-image-base/package.json new file mode 100644 index 000000000..5400b7028 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/core-image-ssg", + "version": "0.0.0", + "private": true, + "dependencies": { + "astro": "workspace:*" + }, + "exports": { + "./service": "./src/service.ts" + } +} diff --git a/packages/astro/test/fixtures/core-image-base/src/assets/penguin1.jpg b/packages/astro/test/fixtures/core-image-base/src/assets/penguin1.jpg Binary files differnew file mode 100644 index 000000000..6c5dcd37a --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/assets/penguin1.jpg diff --git a/packages/astro/test/fixtures/core-image-base/src/assets/penguin2.jpg b/packages/astro/test/fixtures/core-image-base/src/assets/penguin2.jpg Binary files differnew file mode 100644 index 000000000..db6c44709 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/assets/penguin2.jpg diff --git a/packages/astro/test/fixtures/core-image-base/src/content/blog/one.md b/packages/astro/test/fixtures/core-image-base/src/content/blog/one.md new file mode 100644 index 000000000..59a5b77ba --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/content/blog/one.md @@ -0,0 +1,10 @@ +--- +title: One +image: ~/assets/penguin2.jpg +cover: + image: ../../assets/penguin1.jpg +--- + +# A post + +text here diff --git a/packages/astro/test/fixtures/core-image-base/src/content/config.ts b/packages/astro/test/fixtures/core-image-base/src/content/config.ts new file mode 100644 index 000000000..b38ad070e --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/content/config.ts @@ -0,0 +1,15 @@ +import { defineCollection, image, z } from "astro:content"; + +const blogCollection = defineCollection({ + schema: z.object({ + title: z.string(), + image: image(), + cover: z.object({ + image: image() + }) + }), +}); + +export const collections = { + blog: blogCollection +}; diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/alias.astro b/packages/astro/test/fixtures/core-image-base/src/pages/alias.astro new file mode 100644 index 000000000..10990dbe3 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/alias.astro @@ -0,0 +1,5 @@ +--- +import image from "~/assets/penguin1.jpg"; +--- + +<img src={image.src} width={image.width} height={image.height} alt="A penguin!" /> diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/aliasMarkdown.md b/packages/astro/test/fixtures/core-image-base/src/pages/aliasMarkdown.md new file mode 100644 index 000000000..048a79bdd --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/aliasMarkdown.md @@ -0,0 +1,3 @@ + + +A penguin diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/blog/[...slug].astro b/packages/astro/test/fixtures/core-image-base/src/pages/blog/[...slug].astro new file mode 100644 index 000000000..dc25493e8 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/blog/[...slug].astro @@ -0,0 +1,33 @@ +--- +import { getImage } from 'astro:assets'; +import { getCollection } from 'astro:content'; + +export async function getStaticPaths() { + const blogEntries = await getCollection('blog'); + return blogEntries.map(entry => ({ + params: { slug: entry.slug }, props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); +const myImage = await getImage(entry.data.image); +--- +<html> + <head> + <title>Testing</title> + </head> + <body> + <h1>Testing</h1> + + <div id="direct-image"> + <img src={entry.data.image.src} width={entry.data.image.width} height={entry.data.image.height} /> + </div> + + <div id="nested-image"> + <img src={entry.data.cover.image.src} width={entry.data.cover.image.width} height={entry.data.cover.image.height} /> + </div> + + <Content /> + </body> +</html> diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/direct.astro b/packages/astro/test/fixtures/core-image-base/src/pages/direct.astro new file mode 100644 index 000000000..10990dbe3 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/direct.astro @@ -0,0 +1,5 @@ +--- +import image from "~/assets/penguin1.jpg"; +--- + +<img src={image.src} width={image.width} height={image.height} alt="A penguin!" /> diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/format.astro b/packages/astro/test/fixtures/core-image-base/src/pages/format.astro new file mode 100644 index 000000000..d2b165d89 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/format.astro @@ -0,0 +1,18 @@ +--- +import { Image } from 'astro:assets'; +import myImage from "../assets/penguin1.jpg"; +--- +<html> +<head> + +</head> +<body> + <div id="no-format"> + <Image src={myImage} alt="a penguin" /> + </div> + + <div id="format-avif"> + <Image src={myImage} alt="a penguin" format="avif" /> + </div> +</body> +</html> diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/get-image.astro b/packages/astro/test/fixtures/core-image-base/src/pages/get-image.astro new file mode 100644 index 000000000..d83b1fd8e --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/get-image.astro @@ -0,0 +1,8 @@ +--- +import { getImage } from "astro:assets"; +import image from "../assets/penguin2.jpg"; + +const myImage = await getImage({ src: image, width: 207, height: 243, alt: 'a penguin' }); +--- + +<img src={myImage.src} {...myImage.attributes} /> diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/index.astro b/packages/astro/test/fixtures/core-image-base/src/pages/index.astro new file mode 100644 index 000000000..d7f9b0551 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/index.astro @@ -0,0 +1,18 @@ +--- +import { Image } from 'astro:assets'; +import myImage from "../assets/penguin1.jpg"; +--- +<html> +<head> + +</head> +<body> + <div id="local"> + <Image src={myImage} alt="a penguin" /> + </div> + + <div id="remote"> + <Image src="https://avatars.githubusercontent.com/u/622227?s=64" alt="fred" width="48" height="48" /> + </div> +</body> +</html> diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/post.md b/packages/astro/test/fixtures/core-image-base/src/pages/post.md new file mode 100644 index 000000000..98da01ce4 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/post.md @@ -0,0 +1,3 @@ + + +Image worked diff --git a/packages/astro/test/fixtures/core-image-base/src/pages/quality.astro b/packages/astro/test/fixtures/core-image-base/src/pages/quality.astro new file mode 100644 index 000000000..706bb6766 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-base/src/pages/quality.astro @@ -0,0 +1,22 @@ +--- +import { Image } from 'astro:assets'; +import myImage from "../assets/penguin1.jpg"; +--- +<html> +<head> + +</head> +<body> + <div id="no-quality"> + <Image src={myImage} alt="a penguin" /> + </div> + + <div id="quality-low"> + <Image src={myImage} alt="a penguin" quality="low" /> + </div> + + <div id="quality-num"> + <Image src={myImage} alt="a penguin" quality="70" /> + </div> +</body> +</html> diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 046e984bc..c81b8f4ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1869,6 +1869,12 @@ importers: dependencies: astro: link:../../.. + packages/astro/test/fixtures/core-image-base: + specifiers: + astro: workspace:* + dependencies: + astro: link:../../.. + packages/astro/test/fixtures/core-image-ssg: specifiers: astro: workspace:* |
