diff options
author | 2022-08-15 00:26:33 -0400 | |
---|---|---|
committer | 2022-08-15 00:26:33 -0400 | |
commit | 0e2f4d74b77cc05b161afe69a8713935fe41591f (patch) | |
tree | 7ec5e614c1db4b7c577cd995e74d0d550e3b622e /examples/blog/src/layouts/BlogPost.astro | |
parent | 16edf0c7730d273771f75f959c9f8015a4f69238 (diff) | |
download | astro-0e2f4d74b77cc05b161afe69a8713935fe41591f.tar.gz astro-0e2f4d74b77cc05b161afe69a8713935fe41591f.tar.zst astro-0e2f4d74b77cc05b161afe69a8713935fe41591f.zip |
image fix (#4322)
Diffstat (limited to 'examples/blog/src/layouts/BlogPost.astro')
-rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 28 |
1 files changed, 6 insertions, 22 deletions
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index 7587913f7..177fe2519 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -2,36 +2,20 @@ import BaseHead from "../components/BaseHead.astro"; import Header from "../components/Header.astro"; import Footer from "../components/Footer.astro"; -import {Image} from '@astrojs/image/components'; export interface Props { content: { title: string; description: string; - publishDate?: string; + pubDate?: string; updatedDate?: string; heroImage?: string; }; } const { - content: { title, description, publishDate, updatedDate, heroImage }, + content: { title, description, pubDate, updatedDate, heroImage }, } = Astro.props as Props; - - -// Match the `heroImage` frontmatter string to its correct -// Astro.glob() import of the file in the src/ directory. -const assets = await Astro.glob('../assets/**/*'); -const heroImageAsset = assets.find(asset => { - if (!heroImage) { - return false; - } - if (!asset.default?.src) { - return false; - } - const index = asset.default.src.indexOf('/assets/'); - return asset.default.src.slice(index) === heroImage; -}); --- <html> @@ -53,16 +37,16 @@ const heroImageAsset = assets.find(asset => { <Header /> <main> <article> - {heroImageAsset && ( - <Image + {heroImage && ( + <img width={720} height={360} - src={heroImageAsset.default} + src={heroImage} alt="" /> )} <h1 class="title">{title}</h1> - {publishDate && <time>{publishDate}</time>} + {pubDate && <time>{pubDate}</time>} {updatedDate && <div>Last updated on <time>{updatedDate}</time></div>} <hr/> <slot /> |