0

I have a Docusauris site that works fine when in development mode, served using npm run start. My docs pages (e.g. docs/GettingStarted.md) include images such as:

<img src="/images/Buttons.png" width="400"/>

which are displayed properly when using the development server.

However, if I now run npm run build and npm run serve, the images are not found. The build process should have changed the URL to, e.g. assets/images/Buttons.png, but it didn't; it remains unchanged as /images/Buttons.png.

It is possible that this arises from a bad docusaurus.config.js. The docusaurus directory is at http://localhost/prsm/doc/help and I am looking at the served pages at http://localhost:3000/prsm/doc/help/

The docusaurus.config.js config has the lines:

const config = {
  title: 'PRSM',
  tagline: 'Participatory System Mapper',
  url: 'http://localhost',
  baseUrl: '/prsm/doc/help/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: '/images/favicon.ico',
...

What am I doing wrong?

Nigel
  • 585
  • 1
  • 5
  • 20

1 Answers1

1

What I should have done is read the documentation even more closely. The correct syntax for what I was trying to achieve is:

<img src={require("/static/images/Buttons.png").default} width="400"/>
Nigel
  • 585
  • 1
  • 5
  • 20