Blog authors page is not using baseUrl when rendering a relative author.image_url

[laliconfigcat]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

It seems to me that author.image_url is not prepended with the baseUrl so the images are not shown correctly for relative images. In the blog posts the relative image url is working (I think it was fixed with this issue: #9577).

Reproducible demo

No response

Steps to reproduce

1. create a site with baseUrl
2. add an author with relative image_url
3. check the generated code for the image on the authors page and on the dedicated author pages.

Expected behavior

The images associated with authors to be rendered correctly.

Actual behavior

The images associated with authors are not rendered correctly.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[slorber]

@laliconfigcat can you please be more concrete and provide an actual example/repro?

We have a PR fix (#10440) but since the bug is quite abstract we are not 100% sure it will fix your case.

• What do you mean by "relative image", is this ./image.png or /image.png
• Where is the image located in the file system
• What's the actual URL of the <img> tag (the one that fails to load)
• What's the expected URL of the <img> tag (the one that would be able to load)

Thanks

---

For now the PR assumes your author image is probably in /static/ and referenced with a URL starting with /. The PR won't cover URLs like ./author.png with the image co-located to the authors.yml file

[laliconfigcat]

Hello @slorber ,

Thanks for getting back to me.

I created a small repro app following these steps:
1: npx create-docusaurus@latest my-website classic
2: change the baseUrl to '/baseUrl' in docusaurus.config.ts
3: change the image_url to /img/docusaurus.png in authors.yml

If you open a blog post, or if you open the blog main page, the author images will be fine (the image url is /baseUrl/img/docusaurus.png), but if you click on the author direct page or the author listing page, the image will not be shown (the url is /img/docusaurus.png).

I tried it with ./img/docusaurus.png too in the authors.yml, but it didn't compile that way. My images are in the static folder, so I hope the PR will solve my problem too.

You can find the repro app here: https://github.com/laliconfigcat/author-repro.

[slorber]

I see thanks

The problem is adding something like this to authors.yml:

slorber:
  name: Sébastien Lorber
  image_url: /img/docusaurus.png

The PR will fix it yes

[laliconfigcat]

Many thanks for the fix! I'm looking forward to it, as the new features are awesome!
Do you happen to know when we can expect a new release with the fix?

[slorber]

thanks @laliconfigcat

You can already use a canary version, it's relatively safe to adopt in production, it's just v3.5 with a few extra well-tested commits.

Otherwise I don't plan to release v3.6 until I merge this one but it's going to take a few more weeks: #10402