Support prepending of base url in markdown image paths

🚀 Feature

I want to display images without using JSX in my Markdown code

![my image](/static/img/...)

and have Docusaurus modify the image src using the project’s baseUrl.

Have you read the [Contributing Guidelines on issues]

Yes

Motivation & Pitch

Currently, it’s recommended to link to an image using:

import useBaseUrl from '@docusaurus/useBaseUrl'

<img alt="ORY Oathkeeper with Prometheus and Grafana" src={useBaseUrl('img/docs/grafana.png')} />

This has several disadvantages. First it doesn’t work with native markdown and thus looks confusing when browsing the docs on e.g. GitHub (both in preview and raw view!):

Second it’s hard to understand for people who don’t know Docusaurus. None of our docs contributors has figured out how to use this correctly. This means that the time to merge for docs changes goes up and frustrates both maintainers as well as contributors.

Third it breaks previews. Assuming that - as it’s documented - the import is always the first element, we get previews in Slack

and even the HTML meta tags which is a SEO-killer:

Please consider adding this functionality to Docusaurus. I’d be happy to help!

[slorber]

Hi @dulinriley

You need to run yarn add url-loader -D to the website folder and it works.

I think it fails because the md image paths are converted require() calls, needing node_modules/url-loader to exist, but it does not exist because it’s just a transitive dependency of Docusaurus. Will try to see how to fix that.

[slorber]

@jknoxville I think @anshulrgoyal found out why the url loader does not work in your case, because the docs are outside of the website, and it does not resolve against parent/website/node_modules but against parent/node_modules.

Adding URL loader in the parent is likely to solve this issue, but we’ll also add resolution to website/node_modules, as it’s likely to be useful for those migrating from docusaurus v1 and keeping docs in place.

I’ve seen this on Flipper: https://github.com/facebook/flipper/blob/master/website/docusaurus.config.js#L118

Did you migrate from v1 and decided to keep the docs in place instead of moving them?