#Static assets

#Introduction

In Rspress, you may use the following static assets:

• Images, videos and other static assets used in .md(x) files
• Logo image at the top left corner of the site
• Site favicon icon
• Homepage logo image
• Other static assets

Next, we will introduce how to use these static assets one by one.

import { defineConfig } from '@rspress/core';

export default defineConfig({
  root: 'docs',
});

#Static assets used in .md(x) files

You can import static assets in markdown (or mdx) files. Rspress is built on Rsbuild - Static Assets under the hood.

#Regular static assets

For example, if the directory structure is as follows:

If there is an image in the same directory as the markdown, you can reference it like this:

![](./demo.png)

Of course, you can also directly use the img tag in .mdx files:

<img src="./demo.png" />

Both usage above will be transformed into:

import image from './demo.png';

<img src={image}>

Not only images, but you can also import videos, audios and other static assets. Other usage methods are consistent with Rsbuild.

#public folder

The public folder under the docs directory can be used to place static assets. These assets are not processed during the build and can be referenced directly via URL.

• When you start the dev server, these assets will be served under the base root path (default /).
• When you run a production build, these assets will be copied to the doc_build directory.

For example, you can place files like robots.txt, manifest.json, or favicon.ico in the public folder.

Here's an example of placing static assets in the public folder. If the root directory is docs and the directory structure is as follows:

In the above index.mdx file, you can use an absolute path to reference demo.png:

![](/demo.png)

When your site is configured with a base path and you use the img tag to introduce an absolute path, you need to use normalizeImagePath provided by @rspress/core/runtime to manually add the base path to its src. Here is an example:

import { normalizeImagePath } from '@rspress/core/runtime';

<img src={normalizeImagePath('/demo.png')} />;

#Top left corner logo

In Rspress, you can specify the logo image at the top left corner through the logo field. For example:

import { defineConfig } from '@rspress/core';

export default defineConfig({
  logo: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
});

The logo field supports both string and object configurations.

When the logo is a string, there are the following config situations:

• Configured as an external link, like the above example.
• Configured as an absolute path, such as /rspress-logo.png. In this case, Rspress will automatically find the rspress-logo.png image in the public folder of your document root directory and display it.
• Configured as a relative path, such as ./docs/public/rspress-logo.png. In this case, Rspress will find the rspress-logo.png image based on the project root directory and display it.

If your website needs to adapt to dark mode, you can also use the object configuration of the logo, such as:

import { defineConfig } from '@rspress/core';

export default defineConfig({
  logo: {
    light: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
    dark: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
  },
});

Here, light represents the logo address in light mode, and dark represents the logo address in dark mode. Their configuration methods are consistent with the above string configuration.

#Favicon

In Rspress, you can specify the site's favicon icon through the icon field. For example:

import { defineConfig } from '@rspress/core';

export default defineConfig({
  icon: 'https://avatars.githubusercontent.com/u/56892468?s=200&v=4',
});

The icon field supports string or URL config, with the following specific ways:

• Configured as an external link, like the above example.
• Configured as an absolute path, such as /favicon.ico. In this case, Rspress will automatically find the favicon.ico icon in the public folder of your document root directory and display it.
• Configured as a relative path, such as ./docs/public/favicon.ico. In this case, Rspress will find the favicon.ico icon based on the project root directory and display it.
• Configured as a file:// protocol or URL, such as file:///local_path/favicon.ico. In this case, Rspress will use the local absolute path /local_path/favicon.ico icon directly and display it.

#Homepage logo

In the frontmatter configuration of the homepage, you can specify the homepage logo image through the hero.image.src field. For example:

---
pageType: home

hero:
  image:
    src: https://avatars.githubusercontent.com/u/56892468?s=200&v=4
    alt: Rspress
---

Here, src is a string, supporting the following configurations:

• Configured as an external link, like the above example.
• Configured as an absolute path, such as /rspress-logo.png. In this case, Rspress will automatically find the rspress-logo.png image in the public folder of your document root directory and display it.

#Other static assets

In some scenarios, you may need to deploy certain specific static assets, such as adding the deployment configuration file _headers of Netlify to specify custom HTTP response headers.

In that case, you can directly put these static assets in the public folder of the document root directory (such as docs). During the project build process, Rspress will automatically copy all assets in the public folder to the product directory. In this way, the assets under public can be deployed to the server.