Resolve webpack image source within Vue Component (within Vuepress)

Question

I am using the latest Vuepress release (1.0.0-alpha.46) and have the docs configured off the root directory and have an assets folder where I store all my images.

Referencing these images in markdown is no problem. For instance:

![ ](../assets/foobar.jpg)

Works just fine even though Webpack is adding an alias to the image of something like assets/foobar.57589334.jpg. Sadly, things start to fall over when I use a Vue component in my Vuepress. In this case I'm simply adding this to my markdown file:

this is some markdown
<zoom-image src="../assets/foobar.jpg" />

But now I'm getting the string literal without webpack's postfix added. I know I could put the image into .vuepress/public but that seems wrong and may actually cache things in the service worker that I don't want to. In the docs it talks about how you can configure webpack with aliases and I thought I'd give that a try. I configured webpack in the .vuepress/config.js file:

configureWebpack: {
  resolve: {
    alias: {
      "@images": "assets"
    }
  }
},

and the MD is now:

this is some markdown
<zoom-image src="~@images/foobar.jpg" />

No errors but maybe not surprisingly the string literal was just passed into my component again. I thought maybe I could pull in some sort of export from webpack to force it to transform the image name but I've not gotten anything to work. Can anyone help?

I'm wondering if you've ever managed to succeed the above? Running into the same issue as we speak. — Robert
– Robert, Commented Jul 5, 2023 at 12:55

li haochen · Accepted Answer · 2019-09-27 07:49:30Z

2

Heellooooo there, if I got your point, my solution looks like below: the config.js is:

configureWebpack: {
  resolve: {
    alias: {
      "@assets": path.resolve(__dirname, '../assets')
    }
  }
},

and my file structure is:

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- icon.png
|-- guide
|   |-- 1.md
|   |-- 2.md
|   |-- 3.md
|   |-- 4.md

And then use this alias like: ![icon](~@assets/icon.png)

answered Sep 27, 2019 at 7:49

li haochen

551 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luis Rivera · Accepted Answer · 2020-09-03 06:05:04Z

1

If for some reason you are not able to get it working with configureWebpack try with chainWebpack instead.

const path = require("path"); // Don't forget this

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@assets', path.resolve(__dirname, "../assets"))
  }
}

My structure

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- foobar.jpg

Alias like ![My foobar](~@assets/foobar.jpg)

answered Sep 3, 2020 at 6:05

Luis Rivera

5173 silver badges13 bronze badges

Collectives™ on Stack Overflow

Resolve webpack image source within Vue Component (within Vuepress)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related