VuePress 1.x: Linking to Images/Assets

Public

The easiest way is to the images at /docs/.vuepress/public

You can refer to the images in markdown via

![Logo](/logo.svg)

NOTE: There is no compilation checking, so it could refer to a broken link.

Relative Path

Create an assets folder at /docs/assets/img.

You can refer to the images in docs/README.md markdown via

![Logo](./assets/img/logo.svg)

If you the markdown is in a sub path (e.g. docs/pages/README.md)

![Logo](../assets/img/logo.svg)

You can also create a local img directory for pages at docs/pages/img.

![Logo 2](./img/logo2.svg)

NOTE: Go through Webpack with compilation path checking and hash path (e.g. /assets/img/logo.5b1898ed.svg)

Webpack Alias

Edit docs/.vuepress/config.js.

const path = require("path");module.exports = {  configureWebpack: {    resolve: {      alias: {        '@assets': path.resolve(__dirname,"../assets")      }    }  }}

Store images at /docs/assets/img.

Link to images in markdown.

![Logo](~@assets/img/logo.svg)

NOTE: You need to restart yarn docs:dev for alias changes to be recognized and take effect.

NOTE: It works in sub path markdown (e.g. docs/pages/README.md) without the need for relative path.

NOTE: It works in components as well (e.g. <img src="~@assets/img/logo.svg" alt="Logo">)

NOTE: Go through Webpack with compilation path checking and hash path (e.g. /assets/img/logo.5b1898ed.svg)

References:

• https://v1.vuepress.vuejs.org/guide/assets.html#relative-urls