Using local image as hero image in blog post

[EdwardDeaver]

Hello,

How do you use a local image in the Image front matter field of a blog post?

Astro is telling me import errors.

'Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath.'

[adamthewilliam]

Hey @EdwardDeaver,

Here is an example of how I have implemented local images with blog posts. My example includes an image which is passed in as a prop to the SinglePost component and an openGraph image which is used in the metadata object.

Example blog post content:

---
publishDate: 2023-08-06T00:00:00Z
author: 
title: 
excerpt: 
image: ~/assets/images/image.png
ogImage: ~/assets/images/open-graph/image.png
tags:
metadata:
  canonical: 
---

Example [...blog].index.astro page:

import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';

import merge from 'lodash.merge';
import type { ImageMetadata } from 'astro';
import Layout from '~/layouts/PageLayout.astro';
import SinglePost from '~/components/blog/SinglePost.astro';
import ToBlogLink from '~/components/blog/ToBlogLink.astro';

import { getCanonical, getPermalink } from '~/utils/permalinks';
import { getStaticPathsBlogPost, blogPostRobots } from '~/utils/blog';
import { findImage } from '~/utils/images';
import type { MetaData } from '~/types';
import RelatedPosts from '~/components/blog/RelatedPosts.astro';

export const prerender = true;

export const getStaticPaths = (async () => {
  return await getStaticPathsBlogPost();
}) satisfies GetStaticPaths;

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

const { post } = Astro.props as Props;

const url = getCanonical(getPermalink(post.permalink, 'post'));
const image = (await findImage(post.image)) as ImageMetadata | string | undefined;
const ogImage = (await findImage(post.ogImage)) as ImageMetadata | string | undefined;

const metadata = merge(
  {
    title: post.title,
    description: post.excerpt,
    robots: {
      index: blogPostRobots?.index,
      follow: blogPostRobots?.follow,
    },
    openGraph: {
      type: 'article',
      ...(ogImage
        ? { images: [{ url: ogImage, width: (image as ImageMetadata)?.width, height: (ogImage as ImageMetadata)?.height }] }
        : {}),
    },
  },
  { ...(post?.metadata ? { ...post.metadata, canonical: post.metadata?.canonical || url } : {}) }
) as MetaData;
---

<Layout metadata={metadata}>
  <SinglePost post={{ ...post, image: image }} url={url}>
    {post.Content ? <post.Content /> : <Fragment set:html={post.content || ''} />}
  </SinglePost>
  <ToBlogLink />
  <RelatedPosts post={post} />
</Layout>

[cvanelteren]

For others that may have this issue. In astro it is not common to put your images with your post content. I had some head scratching debugging when figuring this out. In hugo you can leave it locally. This fragment above works when you put the image content in assets.

[JonathanWillis]

@adamthewilliam I'm getting the same issue as @EdwardDeaver , the only difference between whats in AStroWind already and your example, is that you use a separate image for openGraph. Otherwise they are the same, but even if I take your example. I still get the same error. I'm stumped at the moment, as it looks correct, the local path is imported as an image from the Utils, and passed down, its not a string so im confused why its complaining in the blog.

17:52:57 [ERROR] [LocalImageUsedWrongly] Image's and getImage's srcparameter must be an imported image or an URL, it cannot be a string filepath. Received~/assets/blog/new-website.png. Hint: If you want to use an image from your srcfolder, you need to either import it or if the image is coming from a content collection, use the image() schema helper https://docs.astro.build/en/guides/images/#images-in-content-collections. See https://docs.astro.build/en/guides/images/#src-required for more information on thesrc property. Error reference: https://docs.astro.build/en/reference/errors/local-image-used-wrongly/ Stack trace: at Object.validateOptions (C:\dev\personal\astro\learning\node_modules\astro\dist\assets\services\service.js:34:15) at async Module.getImage (C:\dev\personal\astro\learning\astro:assets:17:49) at async Promise.all (index 0) at async eval (C:\dev\personal\astro\learning\src\components\common\Image.astro:51:11)

[JonathanWillis]

Finally got to the bottom of it. FindImage, can return a string or ImageMetaData. You need ImageMetaData.

The issue was in images.ts

  // Relative paths or not "~/assets/"
  if (!imagePath.startsWith('~/assets/images')) {
    return imagePath;
  }

My images were in ~/assets/blog instead of ~/assets/images/blog