# Обработка ссылок на ресурсы

# Относительные URL

Все файлы markdown компилируются в компоненты Vue и обрабатываются webpack, поэтому вы можете и должны предпочитать использовать относительные ссылки на какой-либо ресурс:

![Картинка](./image.png)

Это будет работать аналогично, как и в шаблонах файлов *.vue. Изображения будут обрабатываться с помощью url-loader и file-loader, и копироваться в соответствующие места в сгенерированной статической сборке.

Кроме того, вы можете использовать префикс ~ для явно указания запроса модуля webpack, чтобы ссылаться на файлы с помощью псевдонимов webpack или на файлы npm зависимостей:

![Картинка по псевдониму](~@alias/image.png)
![Картинка из зависимости](~some-dependency/image.png)

Псевдонимы webpack можно настроить с помощью configureWebpack в .vuepress/config.js. Например:

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@alias': 'path/to/some/dir'
      }
    }
  }
}

# Публичные файлы

Иногда вам может потребоваться предоставить статические ресурсы, на которые напрямую не ссылаются из файлов markdown или компонентов темы — например, favicons и иконки PWA. В таких случаях вы можете поместить их в каталог .vuepress/public и они будут скопированы в корень сгенерированного каталога.

# Базовый URL

Если ваш сайт будет опубликован не по корневому URL, вы можете указать опцию base в файле .vuepress/config.js. Например, если вы планируете опубликовать ваш сайт по адресу https://foo.github.io/bar/, тогда base должна быть установлена "/bar/" (значение всегда должно начинаться и заканчиваться слэшем).

При использовании базового URL, если вы хотите ссылаться на картинку в каталоге .vuepress/public, вы должны использовать URL такие как /bar/image.png. Однако, это достаточно хрупкий вариант, если вы решите когда-нибудь позднее изменить значение base. Чтобы помочь с этим, VuePress предоставляет вспомогательный метод $withBase (внедряется в прототип Vue), который сгенерирует правильный путь:

<img :src="$withBase('/foo.png')" alt="foo">

Обратите внимание, что вы можете использовать приведённый выше синтаксис не только в компонентах темы, но и в ваших файлах markdown.

Кроме того, если установлена опция base, значение будет автоматически добавляться ко всем URL-адресам ресурсов в настройках .vuepress/config.js.