Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use alias for base url? #2308

Open
peteruithoven opened this issue Apr 14, 2020 · 2 comments
Open

Use alias for base url? #2308

peteruithoven opened this issue Apr 14, 2020 · 2 comments
Labels
contribution welcome Contributions welcome type: feature request Request to add a new feature

Comments

@peteruithoven
Copy link
Contributor

Feature request

What problem does this feature solve?

When using a different base it's not possible to use the regular image markdown syntax, for example:

![Forest](/images/forest.jpg)

Currently the workaround is using html and withBase

<img :src="$withBase('/images/forest.jpg')" alt="Forest">

What does the proposed API look like?

Would it be possible to use a webpack alias to refer to the base url? For example:

![Forest](~@base/public/images/forest.jpg)

But, this doesn't work out of the box. I tried this and got the following error

Module not found: Error: Can't resolve '@base/public/images/forest.jpg' in '/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/src/blog'
resolve '@base/public/images/forest.jpg' in '/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/src/blog'
  Parsed request is a module
  using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/package.json (relative path: ./src/blog)
    aliased with mapping '@base': 'src/.vuepress' to 'src/.vuepress/public/images/forest.jpg'
      Parsed request is a module
      using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/package.json (relative path: ./src/blog)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          looking for modules in /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules
            using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./lib/node/webpack/node_modules)
              Field 'browser' doesn't contain a valid alias configuration
              using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
                .jsx
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
                .vue
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
                .styl
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
                as directory
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules
            using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./lib/node/node_modules)
              Field 'browser' doesn't contain a valid alias configuration
              using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./lib/node/node_modules/src/.vuepress/public/images/forest.jpg)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
                .jsx
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
                .vue
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
                .styl
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
                as directory
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules
            using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./lib/node_modules)
              Field 'browser' doesn't contain a valid alias configuration
              using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./lib/node_modules/src/.vuepress/public/images/forest.jpg)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
                .jsx
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
                .vue
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
                .styl
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
                as directory
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules
            using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./node_modules)
              Field 'browser' doesn't contain a valid alias configuration
              using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/package.json (relative path: ./node_modules/src/.vuepress/public/images/forest.jpg)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
                .jsx
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
                .vue
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
                .styl
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
                as directory
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules
            using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/package.json (relative path: ./node_modules/@vuepress/node_modules)
              Field 'browser' doesn't contain a valid alias configuration
              using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/package.json (relative path: ./node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
                .jsx
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
                .vue
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
                .styl
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
                as directory
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules
            using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/package.json (relative path: ./node_modules)
              Field 'browser' doesn't contain a valid alias configuration
              using description file: /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/package.json (relative path: ./node_modules/src/.vuepress/public/images/forest.jpg)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
                .jsx
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
                .vue
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
                .styl
                  Field 'browser' doesn't contain a valid alias configuration
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
                as directory
                  /home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/Metabolic/dev/node_modules
            No description file found
            Field 'browser' doesn't contain a valid alias configuration
            No description file found
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
            .styl
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
            as directory
              /home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/Metabolic/node_modules
            No description file found
            Field 'browser' doesn't contain a valid alias configuration
            No description file found
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
            .styl
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
            as directory
              /home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/Projects/node_modules
            No description file found
            Field 'browser' doesn't contain a valid alias configuration
            No description file found
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
            .styl
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
            as directory
              /home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/peteruithoven/node_modules
            No description file found
            Field 'browser' doesn't contain a valid alias configuration
            No description file found
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
            .styl
              Field 'browser' doesn't contain a valid alias configuration
              /home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
            as directory
              /home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /home/node_modules
            No description file found
            Field 'browser' doesn't contain a valid alias configuration
            No description file found
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              /home/node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /home/node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
            .styl
              Field 'browser' doesn't contain a valid alias configuration
              /home/node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
            as directory
              /home/node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
          looking for modules in /node_modules
            No description file found
            Field 'browser' doesn't contain a valid alias configuration
            No description file found
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /node_modules/src/.vuepress/public/images/forest.jpg.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /node_modules/src/.vuepress/public/images/forest.jpg.jsx doesn't exist
            .vue
              Field 'browser' doesn't contain a valid alias configuration
              /node_modules/src/.vuepress/public/images/forest.jpg.vue doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /node_modules/src/.vuepress/public/images/forest.jpg.json doesn't exist
            .styl
              Field 'browser' doesn't contain a valid alias configuration
              /node_modules/src/.vuepress/public/images/forest.jpg.styl doesn't exist
            as directory
              /node_modules/src/.vuepress/public/images/forest.jpg doesn't exist
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/webpack/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/lib/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/core/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/@vuepress/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/dev/vuepress-experiment/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/package.json]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg/package.json]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/dev/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/Metabolic/node_modules/package.json]
[/home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg/package.json]
[/home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/Metabolic/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/Projects/node_modules/package.json]
[/home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg/package.json]
[/home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/Projects/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/peteruithoven/node_modules/package.json]
[/home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg/package.json]
[/home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/peteruithoven/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/home/node_modules/package.json]
[/home/node_modules/src/.vuepress/public/images/forest.jpg/package.json]
[/home/node_modules/src/.vuepress/public/images/forest.jpg]
[/home/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/home/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/home/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/home/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/home/node_modules/src/.vuepress/public/images/forest.jpg.styl]
[/node_modules/package.json]
[/node_modules/src/.vuepress/public/images/forest.jpg/package.json]
[/node_modules/src/.vuepress/public/images/forest.jpg]
[/node_modules/src/.vuepress/public/images/forest.jpg.js]
[/node_modules/src/.vuepress/public/images/forest.jpg.jsx]
[/node_modules/src/.vuepress/public/images/forest.jpg.vue]
[/node_modules/src/.vuepress/public/images/forest.jpg.json]
[/node_modules/src/.vuepress/public/images/forest.jpg.styl]

I used the following config to add the public alias.

title: Experiment
description: An interactive webbased report experiment
dest: public/experiments/vuepress/
base: /experiments/vuepress/
configureWebpack:
  resolve:
    alias:
      "@base": src/.vuepress

Docs:

How should this be implemented in your opinion?

By including a default webpack alias?

Are you willing to work on this yourself?

Yes, but I'd need some tips.
@billyyyyy3320
Copy link
Collaborator

I like it. Contribution Welcome.

If you'd like to take it. This might the file and I guess you can get siteConfig there.

@billyyyyy3320 billyyyyy3320 added contribution welcome Contributions welcome type: feature request Request to add a new feature labels Apr 15, 2020
@peteruithoven
Copy link
Contributor Author

Ah interesting! I noticed that sourceDir and therefore the @source alias revers to the src folder so in my case I was able to refer to the image using:

![Forest](~@source/.vuepress/public/images/forest.jpg)

With my base config set to /experiments/vuepress/ this is then translated to the following html:

<img src="/experiments/vuepress/assets/img/forest.90378e61.jpg" alt="Forest">

So I guess because this is a "compile time" thing the base doesn't really matter that's handled automatically by webpack.

Now I'm not sure how to proceed. Files in this ./vuepress/public/ folder are included anyway, so having them also uploaded to /assets/img/ doesn't really make sense.
If I place the image in src/images/ I can use:

![Forest](~@source/images/forest.jpg)

This results in

<img src="/experiments/vuepress/assets/img/forest.90378e61.jpg" alt="Forest">

But then I'm not sure this is an big enough improvement over using relative paths to warrant the complexity of the ~@source/ path. For example from a markdown file in /src/blog/ I can also refer to the same image using:

![Forest](../images/forest.jpg)

This will result in the same html. I think the ~@source/ only makes sense if you expect to move the file a lot and/or you have a lot of folder.

It might be interesting to mention this existing @source alias in the documention, for example here:

peteruithoven added a commit to peteruithoven/vuepress that referenced this issue Apr 15, 2020
@peteruithoven
Add @source alias to docs
4e12de8 
See vuejs#2308
@peteruithoven peteruithoven mentioned this issue Apr 15, 2020
Merged
18 tasks
@peteruithoven peteruithoven mentioned this issue Dec 30, 2020
Open
1 task
ulivz pushed a commit that referenced this issue Dec 20, 2021
@peteruithoven
docs: add @source alias (#2314)
53cc2dd 
See #2308
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contribution welcome Contributions welcome type: feature request Request to add a new feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@peteruithoven @billyyyyy3320