next creek
Trying to setup a blog website and following the following folder structure:
.
└── src/
├── assets/
│ ├── post-1.jpg
│ ├── post-2.jpg
│ └── post-3.png
├── content/
│ └── blog/
│ ├── post-1.md
│ ├── post-2.md
│ └── post-3.md
├── layouts/
│ └── BlogPostLayout.astro
└── pages/
└── blog/
├── index.astro
└── [slug].astro
post-1.md looks like this
---
layout: ../../layouts/BlogPostLayout.astro
title: A Post about Important Items Of Life
date: 2022-11-20
author: Darnell McClure
description: Have you ever wondered what the most important items of life are? Well, wonder no more!
draft: false
tag: Reference Docs
priority: 10
titleImage: ../assets/post-1.jpg
---
Nisi duis ex aliqua eu officia eiusmod duis magna pariatur. Irure laborum qui aliqua nulla esse cillum laborum aliquip nulla elit. Id id Lorem duis irure cillum culpa. Nulla sint et aliqua velit do. Nulla sit sit proident consectetur enim ullamco aliqua in reprehenderit ullamco officia.
[slug].astro looks like this:
---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import BlogPostLayout from "../../layouts/BlogPostLayout.astro";
export async function getStaticPaths() {
const blogPosts = await getCollection(
"blog",
({ data }) => !data.draft && data.date < new Date()
);
return blogPosts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const { Content } = await post.render();
---
<BlogPostLayout title={post.data.title}>
<h1>{post.data.title}</h1>
<span>{post.data.titleImage}</span>
<Image src={post.data.titleImage} alt="" height={250} width={800} format="webp" />
<Content />
</BlogPostLayout>
However, a broken image rendered with src localhost:3000/assets/post-1.jpg.
Please help me out.
terse crypt
