How to get the absolute image path from relative image path in contentLoaded function of plugin-content-blog

[jiashengguo]

I would like to display some related posts for each blog post. I managed to do so by exending contentLoaded function of plugin-content-blog, and put the related posts as the additional metadata.

I could get the image path of the related post from metadata.frontMatter.image. However, it might be a relative path like './cover.png', the absolute path would be something like 'assets/images/cover-151d0f0e2117ecc4154fd9603de23713.png'.

How can I get that absolute path?

[slorber]

metadata.frontMatter.image is what the user provides, unaltered.

Markdown images like ![img](./cover.png) are converted to <img src={require("./cover.png")}/> by our mdx Webpack loader.

We also have a "createAssets" feature (internal, and not really elegant implementation) that does this too for some front matter fields, and the blog post image front matter is one of them.

See how we handle this on our own theme code, and try to reuse that:

import {useBlogPost} from '@docusaurus/plugin-content-blog/client';


const {assets, metadata} = useBlogPost();
const image = assets.image ?? frontMatter.image;

Note the assets thing is not really elegant, I'd like to find a better solution in the future so this code might break. But once we refactor it, you'd probably find another way to implement what you want so it is relatively safe to use this on your site.

---

Unfortunately you won't be able to access assets in contentLoaded, because this data is computed by our bundler during the bundling phase (after contentLoaded). If you really need to access that asset URL, you would need to inject actual related blog post content instead of just JSON metadata. This is what we do for our paginated lists:

  function blogPostItemsModule(ids: string[]) {
    return ids.map((id) => {
      return {
        content: {
          __import: true,
          path: getBlogPostById(id).metadata.source,
          query: {
            truncated: true,
          },
        },
      };
    });
  }


  function createBlogPostsPaginatedRoutes(): RouteConfig[] {
    return blogListPaginated.map((paginated) => {
      return {
        path: paginated.metadata.permalink,
        component: blogListComponent,
        exact: true,
        modules: {
          sidebar: sidebarModulePath,
          items: blogPostItemsModule(paginated.items), // The important part
        },
        props: {
          metadata: paginated.metadata,
        },
      };
    });
  }

The route above will receive an array of blog posts on the items prop, each of these will have the truncated mdx content preview, metadata, assets, and everything.

[slorber]

That being said, I understand all this is a bit complex.

We want the Docusaurus blog to be full-featured, and showing related posts would be a useful feature that I already saw being requested. We probably won't automate this using ML/AI, but we could let you register in front matter a list of related posts and have a default UI to render those?

Do you mind opening a feature request for it?

[jiashengguo]

Thanks for the clarify. From the below issue, I find that it is possible to get that path using require in the frontend code:
#6403

<img src={require('/blog/xxx/cover.png').default}/>

However, it seems only work with static string . If the path is a dynamic value it still doesn't work.

<img src={require(imageUrl).default}/>

From the console it shows the below warnning message.

"Critical dependency: the request of a dependency is an expression"}

If the dyanmic require could work, it could also solve my problem.

[slorber]

Yes you have to provide a static path string, this is how Webpack and bundlers work regarding assets. They have to know ahead of time, while bundling, which assets you are referencing, and cannot use dynamic variables.