Assets

    This is generally the suggested way to import images, as users usually place images near the Markdown file that references them.

    You can put some static assets inside public directory, and they will be copied to the root of the generated directory.

    The default public directory is , which can be changed in config.

    It would be useful in some cases:

    • You may need to provide static assets that are not directly referenced in any of your Markdown files, for example, favicon and PWA icons.
    • You may need to serve some shared static assets, which may even be referenced outside your site, for example, logo images.
    • You may want to reference images using absolute URLs in your Markdown content.

    Take our documentation source files as an example, we are putting the logo of VuePress inside the public directory:

    1.    ├─ .vuepress
    2.    |  └─ public
    3.    |     └─ images
    4.    |        └─ hero.png  # <- Logo file
    5.    └─ guide
    6.       └─ assets.md       # <- Here we are

    We can reference our logo in current page like this:

    Output

    TIP

    Config reference: public

    If your site is deployed to a non-root URL, i.e. the is not "/", you will need to prepend the base to the absolute URLs of your public files.

    For example, if you plan to deploy your site to https://foo.github.io/bar/, then base should be set to "/bar/", and you have to reference your public files in Markdown like this:

    To help with that, VuePress provides a built-in helper $withBase that generates the correct path:

      The helper is verbose in Markdown. So it might be more helpful for theme and plugin authors.

      TIP

      Config reference: base

      Although it is not a common usage, you can reference images from dependent packages:

      1. npm install -D package-name

      The path aliases that set in config file are also supported:

      1. module.exports = {
      2.   alias: {
      3.     '@alias': path.resolve(__dirname, './path/to/some/dir'),
      4.   },
      5. }
      1. ![Image from path alias](@alias/image.png)

      Config reference: