Vuepress - How to get the processed image filename - vuepress

Question

In Vuepress, when adding an image to our markdown, it will process the image and add a hash to its filename.
For example, the markdown:
![My Image](../images/my-image.png)
Will result in the HTML:
<img src="/assets/img/my-image.03c0601d.png" alt="My Image">
When the image is just used in the page, this isn't a problem, since the resulted HTML will use the processed image filename.
The problem is when we want to add a link to this image.
For example, the markdown:
[![My Image](../images/my-image.png)](../images/my-image.png)
results in the HTML:
<a href="/assets/img/my-image.png">
<img src="/assets/img/my-image.03c0601d.png" alt="My Image">
</a>
which is obviously a broken link, since the processed image filename is not my-image.png, but my-image.03c0601d.png instead.
How can I save this "processed" image filename into a variable to be used in a link?
Or, in other words, how could I handle this scenario where I want to open the processed image on its own?
Thank you in advance.

Answer 1

Updating the VuePress configuration file (config.js) with the code below fixed it for me. The links are now updated with the correct image path including the hash.
chainWebpack: (config, isServer) => {
config.module.rule('vue').uses.store.get('vue-loader').store.get('options').transformAssetUrls = {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
a: 'href'
}
}
Example:
The markdown:
[![My Image](../images/my-image.png)](../images/my-image.png)
Results in the HTML:
<a href="/assets/img/my-image.03c0601d.png">
<img src="/assets/img/my-image.03c0601d.png" alt="My Image">
</a>
Reference: https://github.com/vuejs/vuepress/issues/826