c54a115e29
Currently, @astrojs/image allows *importing* images from srcDir
only. Importing images from outside srcDir fails miserably *in dev
mode* and produces incorrect src.
This happens because `path.relative(fileURLToPath(config.srcDir), id)`
resolves to "../something" and when joined with '/@astroimage' cancels
it out (`join('/@astroimage', '../../something')` => `'/something'`).
Rework /@astroimage URL scheme to be similar to "/@fs/" scheme—always
export absolute path to the target file.
32 lines
1.9 KiB
Text
32 lines
1.9 KiB
Text
---
|
|
import socialJpg from '../assets/social.jpg';
|
|
import introJpg from '../assets/blog/introducing astro.jpg';
|
|
import outsideSrc from '../../social.png';
|
|
import { Picture } from '@astrojs/image/components';
|
|
const publicImage = new URL('./hero.jpg', Astro.url);
|
|
---
|
|
|
|
<html>
|
|
<head>
|
|
<!-- Head Stuff -->
|
|
</head>
|
|
<body>
|
|
<Picture id="hero" src={publicImage.pathname} sizes="100vw" widths={[384, 768]} aspectRatio={768/414} alt="Hero image" />
|
|
<br />
|
|
<Picture id="spaces" src={introJpg} sizes="100vw" widths={[384, 768]} aspectRatio={768/414} alt="spaces" />
|
|
<br />
|
|
<Picture id="outside-src" src={outsideSrc} sizes="100vw" widths={[384, 768]} aspectRatio={768/414} alt="outside-src" />
|
|
<br />
|
|
<Picture id="social-jpg" src={socialJpg} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Social image" />
|
|
<br />
|
|
<Picture id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" formats={["avif", "webp", "png"]} />
|
|
<br />
|
|
<Picture id='inline' src={import('../assets/social.jpg')} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} alt="Inline social image" />
|
|
<br />
|
|
<Picture id="bg-color" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" background="rgb(51, 51, 51)" formats={['avif', 'jpeg']} />
|
|
<br />
|
|
<Picture id="ipsum" src="https://dummyimage.com/200x300" sizes="100vw" widths={[100, 200]} aspectRatio={2/3} formats={["avif", "webp", "jpg"]} alt="ipsum" />
|
|
<br />
|
|
<Picture id="query" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?token=abc" sizes="100vw" widths={[544]} aspectRatio={544/184} alt="query" />
|
|
</body>
|
|
</html>
|