Vuepress - 如何获取处理后的图像文件名答案

【问题标题】：Vuepress - How to get the processed image filenameVuepress - 如何获取处理后的图像文件名
【发布时间】：2019-05-21 07:45:51
【问题描述】：

在 Vuepress 中，当向我们的 markdown 添加图像时，它会处理图像并为其文件名添加哈希。

比如markdown：

![My Image](../images/my-image.png)

将生成 HTML：

<img src="/assets/img/my-image.03c0601d.png" alt="My Image">

当图像只是在页面中使用时，这不是问题，因为生成的 HTML 将使用处理后的图像文件名。

问题是当我们想为这张图片添加一个链接时。

比如markdown：

[![My Image](../images/my-image.png)](../images/my-image.png)

HTML 中的结果：

<a href="/assets/img/my-image.png">
    <img src="/assets/img/my-image.03c0601d.png" alt="My Image">
</a>

这显然是一个断开的链接，因为处理后的图像文件名不是my-image.png，而是my-image.03c0601d.png。

如何将此“已处理”图像文件名保存到要在链接中使用的变量中？

或者，换句话说，我该如何处理我想自己打开处理后的图像的情况？

提前谢谢你。

【问题讨论】：

标签： vuepress

【解决方案1】：

使用下面的代码更新 VuePress 配置文件 (config.js) 为我修复了它。链接现在更新为正确的图像路径，包括哈希。

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'
  }
}

例子：

降价：

[![My Image](../images/my-image.png)](../images/my-image.png)

HTML 中的结果：

<a href="/assets/img/my-image.03c0601d.png">
    <img src="/assets/img/my-image.03c0601d.png" alt="My Image">
</a>

参考：https://github.com/vuejs/vuepress/issues/826

【讨论】：