コンテンツにスキップ

Sample Output

このコンテンツはまだ日本語訳がありません。

src/pages/index.astro
---
import GlobalStyles from 'astro-image-processor/components/GlobalStyles.astro';
import Picture from 'astro-image-processor/components/Picture.astro';
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Astro Image Processor</title>
</head>
<body>
<h1>Astro Image Processor</h1>
<Picture
src="/src/assets/3000_gray.png"
alt="Astro Image Processor"
preload="avif"
width={1000}
widths={[1000, 2000, 3000]}
placeholder="blurred"
blurProcessor={sharp().grayscale().resize(20).webp({ quality: 1 })}
artDirectives={[
{
src: '/src/assets/3000_gray.png',
densities: [1, 2, 3],
width: 500,
media: '(max-width: 520px)',
processor: sharp().resize(2000, 3000),
placeholder: 'dominantColor',
placeholderColor: '#666',
preload: 'avif',
},
]}
tagName="section"
containerAttributes={{
'class:list': ['foo', 'bar'],
}}
>
<p class="baz">slot</p>
</Picture>
</body>
</html>
<style>
.foo {
position: relative;
}
.bar {
padding: 20px;
}
.baz {
color: red;
}
</style>
<GlobalStyles />
dist/index.html
<!DOCTYPE html>
<html lang="en" data-astro-cid-j7pv25f6>
<head>
<meta charset="utf-8">
<title>Astro Image Processor</title>
<style>
@keyframes aip-placeholder-fade {
0% {
opacity: 1
}
to {
opacity: 0
}
}
:root {
--aip-placeholder-animation-name: aip-placeholder-hidden
}
:where(.aip-elm-img) {
display: inline-block;
overflow: clip;
vertical-align: middle;
background-repeat: no-repeat
}
:where(.aip-elm-picture) {
display: inline-block;
position: relative;
--aip-placeholder-animation-state: paused;
background-repeat: no-repeat
}
:where(.aip-elm-picture):after {
display: block;
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
animation-name: var(--aip-placeholder-animation-name);
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
animation-play-state: var(--aip-placeholder-animation-state);
background-repeat: no-repeat
}
:where(.aip-elm-container) {
position: relative;
background-repeat: no-repeat
}
:where(.aip-elm-as-background) {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
max-width: unset
}
:where(.aip-elm-img.aip-layout-constrained) {
max-width: 100%;
height: auto
}
:where(.aip-elm-picture.aip-layout-fullWidth) {
width: 100%;
height: auto
}
:where(.aip-elm-img.aip-layout-fullWidth) {
width: 100%;
height: auto
}
:where(.aip-elm-picture.aip-layout-fill) {
width: 100%;
height: 100%
}
:where(.aip-elm-img.aip-layout-fill) {
width: 100%;
height: 100%
}
.foo[data-astro-cid-j7pv25f6] {
position: relative
}
.bar[data-astro-cid-j7pv25f6] {
padding: 20px
}
.baz[data-astro-cid-j7pv25f6] {
color: red
}
</style>
<script type="module">
document.addEventListener("DOMContentLoaded", () => {
document.documentElement.style.setProperty(
"--aip-placeholder-animation-name",
"aip-placeholder-fade")
});
</script>
<style>
img[data-astro-aip-8c2980cb] {
background-size: cover;
background-position: 50% 50%;
background-image: var(--aip-blurred-image);
object-fit: cover
}
picture[data-astro-aip-8c2980cb] {
--aip-blurred-image: url("data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAADwAgCdASoUABQAP83k620/uTGpqAgD8DmJaQAASybQAACDFgAAAA==")
}
picture[data-astro-aip-8c2980cb]::after {
background-image: var(--aip-blurred-image);
background-size: cover;
background-position: 50% 50%
}
div[data-astro-aip-8c2980cb] {
width: 1000px
}
@media(max-width: 520px) {
picture[data-astro-aip-8c2980cb]::after {
background-color: #666
}
img[data-astro-aip-8c2980cb] {
object-fit: cover
}
}
</style>
<link rel="preload"
as="image"
type="image/avif"
imagesizes="(min-width: 1000px) 1000px, 100vw"
imagesrcset="/_astro/2ad8685b6d73025dffd70bf08466f373.avif 1000w, /_astro/aa42252dc6734f14964142129aa1b06d.avif 2000w, /_astro/1551a2a6d6b041900edc69d9ad48fe9f.avif 3000w">
<link rel="preload"
as="image"
type="image/avif"
media="(max-width: 520px)"
imagesizes="(min-width: 500px) 500px, 100vw"
imagesrcset="/_astro/2ceecec44530035558df5f8ec2237e5f.avif 1x, /_astro/048e32e5f5c9e6d42a48475d6c2a0af0.avif 2x, /_astro/bd62f7eafb0763d192263b34f7859cfb.avif 3x">
</head>
<body data-astro-cid-j7pv25f6>
<h1 data-astro-cid-j7pv25f6>Astro Image Processor</h1>
<section data-astro-aip-8c2980cb data-astro-cid-j7pv25f6 class="foo bar">
<picture class="aip-elm-picture aip-elm-as-background aip-layout-constrained"
data-astro-aip-8c2980cb
data-astro-cid-j7pv25f6>
<source srcset="/_astro/2ceecec44530035558df5f8ec2237e5f.avif 1x, /_astro/048e32e5f5c9e6d42a48475d6c2a0af0.avif 2x, /_astro/bd62f7eafb0763d192263b34f7859cfb.avif 3x"
sizes="(min-width: 1000px) 1000px, 100vw"
width="500"
height="750"
type="image/avif"
media="(max-width: 520px)">
<source srcset="/_astro/07f6bb01ab3f760ea6faad794bb8a5f7.webp 1x, /_astro/e6a6fdcaa5fc61af7b376c43ec26f215.webp 2x, /_astro/7d8d7ddb37aa5cecceb301999108e4d6.webp 3x"
sizes="(min-width: 1000px) 1000px, 100vw"
width="500"
height="750"
type="image/webp"
media="(max-width: 520px)">
<source srcset="/_astro/2ad8685b6d73025dffd70bf08466f373.avif 1000w, /_astro/aa42252dc6734f14964142129aa1b06d.avif 2000w, /_astro/1551a2a6d6b041900edc69d9ad48fe9f.avif 3000w"
sizes="(min-width: 1000px) 1000px, 100vw"
width="1000"
height="1000"
type="image/avif">
<img class="aip-elm-img aip-elm-as-background"
alt="Astro Image Processor"
data-astro-cid-j7pv25f6
src="/_astro/beeafc331857b458e1cada00de1b665f.webp"
srcset="/_astro/beeafc331857b458e1cada00de1b665f.webp 1000w, /_astro/ddbe42c7b4ba4c7600c38725c428cec1.webp 2000w, /_astro/fb8791adb4f611296f4f445eacab4934.webp 3000w"
width="1000"
height="1000"
sizes="(min-width: 1000px) 1000px, 100vw"
data-astro-aip-8c2980cb
onload="parentElement.style.setProperty('--aip-placeholder-animation-state', 'running');">
</picture>
<p class="baz" data-astro-cid-j7pv25f6>slot</p>
</section>
</body>
</html>