1

在 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而是。

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

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

先感谢您。

4

1 回答 1

2

使用下面的代码更新 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

于 2019-02-19T17:03:08.910 回答