diff options
Diffstat (limited to 'packages/integrations')
8 files changed, 74 insertions, 7 deletions
diff --git a/packages/integrations/image/src/build/ssg.ts b/packages/integrations/image/src/build/ssg.ts index 41fc510d7..2a6976d76 100644 --- a/packages/integrations/image/src/build/ssg.ts +++ b/packages/integrations/image/src/build/ssg.ts @@ -8,7 +8,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; import type { SSRImageService, TransformOptions } from '../loaders/index.js'; import { debug, info, warn, type LoggerLevel } from '../utils/logger.js'; -import { isRemoteImage } from '../utils/paths.js'; +import { isRemoteImage, prependForwardSlash } from '../utils/paths.js'; import { ImageCache } from './cache.js'; async function loadLocalImage(src: string | URL) { @@ -135,10 +135,15 @@ export async function ssgBuild({ // tracks the cache duration for the original source image let expires = 0; - // Vite will prefix a hashed image with the base path, we need to strip this - // off to find the actual file relative to /dist - if (config.base && src.startsWith(config.base)) { - src = src.substring(config.base.length - +config.base.endsWith('/')); + // Strip leading assetsPrefix or base added by addStaticImage + if (config.build.assetsPrefix) { + if (src.startsWith(config.build.assetsPrefix)) { + src = prependForwardSlash(src.slice(config.build.assetsPrefix.length)); + } + } else if (config.base) { + if (src.startsWith(config.base)) { + src = prependForwardSlash(src.slice(config.base.length)); + } } if (isRemoteImage(src)) { diff --git a/packages/integrations/image/src/index.ts b/packages/integrations/image/src/index.ts index 0a101724e..671faad5c 100644 --- a/packages/integrations/image/src/index.ts +++ b/packages/integrations/image/src/index.ts @@ -130,7 +130,11 @@ export default function integration(options: IntegrationOptions = {}): AstroInte // Doing this here makes sure that base is ignored when building // staticImages to /dist, but the rendered HTML will include the // base prefix for `src`. - return prependForwardSlash(joinPaths(_config.base, _buildConfig.assets, filename)); + if (_config.build.assetsPrefix) { + return joinPaths(_config.build.assetsPrefix, _buildConfig.assets, filename); + } else { + return prependForwardSlash(joinPaths(_config.base, _buildConfig.assets, filename)); + } } // Helpers for building static images should only be available for SSG diff --git a/packages/integrations/image/src/vite-plugin-astro-image.ts b/packages/integrations/image/src/vite-plugin-astro-image.ts index b721578a5..bf5078fb3 100644 --- a/packages/integrations/image/src/vite-plugin-astro-image.ts +++ b/packages/integrations/image/src/vite-plugin-astro-image.ts @@ -9,6 +9,7 @@ import type { Plugin, ResolvedConfig } from 'vite'; import type { IntegrationOptions } from './index.js'; import type { InputFormat } from './loaders/index.js'; import { metadata } from './utils/metadata.js'; +import { appendForwardSlash } from './utils/paths.js'; export interface ImageMetadata { src: string; @@ -118,7 +119,10 @@ export function createPlugin(config: AstroConfig, options: Required<IntegrationO const [full, hash, postfix = ''] = match; const file = this.getFileName(hash); - const outputFilepath = resolvedConfig.base + file + postfix; + const prefix = config.build.assetsPrefix + ? appendForwardSlash(config.build.assetsPrefix) + : config.base; + const outputFilepath = prefix + file + postfix; s.overwrite(match.index, match.index + full.length, outputFilepath); } diff --git a/packages/integrations/image/test/assets-prefix.test.js b/packages/integrations/image/test/assets-prefix.test.js new file mode 100644 index 000000000..099acfeb3 --- /dev/null +++ b/packages/integrations/image/test/assets-prefix.test.js @@ -0,0 +1,22 @@ +import { expect } from 'chai'; +import * as cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +const assetsPrefixRegex = /^http:\/\/localhost:4321\/_astro\/.*/; + +describe('Assets Prefix', function () { + /** @type {import('../../../astro/test/test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ root: './fixtures/assets-prefix/' }); + await fixture.build(); + }); + + it('images src has assets prefix', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + const img = $('#social-jpg'); + expect(img.attr('src')).to.match(assetsPrefixRegex); + }); +}); diff --git a/packages/integrations/image/test/fixtures/assets-prefix/astro.config.mjs b/packages/integrations/image/test/fixtures/assets-prefix/astro.config.mjs new file mode 100644 index 000000000..e5a629ed0 --- /dev/null +++ b/packages/integrations/image/test/fixtures/assets-prefix/astro.config.mjs @@ -0,0 +1,10 @@ +import { defineConfig } from 'astro/config'; +import image from '@astrojs/image'; + +// https://astro.build/config +export default defineConfig({ + integrations: [image()], + build: { + assetsPrefix: 'http://localhost:4321', + } +}); diff --git a/packages/integrations/image/test/fixtures/assets-prefix/package.json b/packages/integrations/image/test/fixtures/assets-prefix/package.json new file mode 100644 index 000000000..a72317c84 --- /dev/null +++ b/packages/integrations/image/test/fixtures/assets-prefix/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/image-assets-prefix", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/image": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/image/test/fixtures/assets-prefix/src/assets/social.png b/packages/integrations/image/test/fixtures/assets-prefix/src/assets/social.png Binary files differnew file mode 100644 index 000000000..1399856f1 --- /dev/null +++ b/packages/integrations/image/test/fixtures/assets-prefix/src/assets/social.png diff --git a/packages/integrations/image/test/fixtures/assets-prefix/src/pages/index.astro b/packages/integrations/image/test/fixtures/assets-prefix/src/pages/index.astro new file mode 100644 index 000000000..b66a202be --- /dev/null +++ b/packages/integrations/image/test/fixtures/assets-prefix/src/pages/index.astro @@ -0,0 +1,13 @@ +--- +import socialJpg from '../assets/social.png'; +import { Image } from '@astrojs/image/components'; +--- + +<html> + <head> + <!-- Head Stuff --> + </head> + <body> + <Image id="social-jpg" src={socialJpg} width={506} height={253} alt="social-jpg" /> + </body> +</html> |
