How to store locally an author image?

[ilg-ul]

When defining an author, the image_url property must be an external URL.

I would like to add the image locally, in the static/img folder. The only way I could do this was to refer to the image via the external URL. It would be nice to have a more convenient way and use the internal relative URL.

[slorber]

This works for me:

slorber:
  name: Sébastien Lorber
  title: Docusaurus maintainer, This Week In React editor
  url: https://thisweekinreact.com
  image_url: /img/docusaurus.png

[ilg-ul]

Thank you, Sébastien, it was useful since I had the confirmation that it should work.

Unfortunately, in my configuration, it did not work :-(

The culprit seems to be the configuration baseUrl:, which is not used when rendering the image.

My site currently uses baseUrl: '/preview/', and when rendering other images the resulting path looks like:

<img loading="lazy" alt="L/B881" src="/preview/assets/images/lb881-0c751a3baa362aaae40e038278c1966e.jpg" width="2560" height="1704" class="img_node_modules-@docusaurus-theme-classic-lib-theme-MDXComponents-Img-styles-module">

For the author image, the resulting path lacks the /preview/ base:

<img class="avatar__photo" src="/img/authors/arot.jpg" alt="Alexandru Rotaru" itemprop="image">

If I explicitly set the prefixed path in the authors.yml file:

  image_url: /preview/img/authors/ilg-ul.jpg

the picture is rendered correctly:

<img class="avatar__photo" src="/preview/img/authors/ilg-ul.jpg" alt="Liviu Ionescu" itemprop="image">

I took a quick look at the code, and I could not find a call to useBaseUrl() in the docusaurus-plugin-content-blog/src/authors.ts, file; probably this is the cause.

I'm using 3.0.0.

[slorber]

Yes you are probably right, we miss a call to apply the baseUrl here.

Please open a bug report or submit a PR so that we don't forget to fix it

[ilg-ul]

#9577

[wparad]

FYI, still sort of broken on 2025-01-02. The image_url supports a relative path, but not from the authors file, but incorrectly from the thing referencing the author. Which means it just doesn't work everywhere all the time. Until this is fixed, you will have give up fixing this just like the Docusaurus team did: https://github.com/facebook/docusaurus/blob/main/website/blog/authors.yml :(

[slorber]

Yes we don't support relative paths everywhere, unfortunately it's not so easy to handle 😅

Yaml files are read in the Node.js side, and Webpack bundler features like require("./image.png") do not work in that environment.