Question

在Vuepress中，将图像添加到我们的Markdown中时，它将处理该图像并将哈希添加到其文件名中。

例如，降价：

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

将生成HTML：

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

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

问题是当我们想要向该图像添加链接时。

例如，降价：

[![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。

如何将“经过处理的”图像文件名保存到变量中以供链接使用？

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

谢谢。

Answer 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

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

1 个答案: