vue.js - 在 Vue Component 中解析 webpack 图片源(在 Vuepress 中)

Question

我使用的是最新的 Vuepress 版本 (1.0.0-alpha.46) 并且在根目录之外配置了文档并且有一个 assets 我存储所有图像的文件夹。

在markdown中引用这些图片是没有问题的。例如:

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

即使 Webpack 正在为类似 assets/foobar.57589334.jpg 的图像添加别名，也能正常工作。可悲的是，当我在我的 Vuepress 中使用 Vue 组件时，事情就开始失败了。在这种情况下，我只是将其添加到我的 Markdown 文件中:

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

但现在我得到的是没有添加 webpack 后缀的字符串文字。我知道我可以将图像放入 .vuepress/public 但这似乎是错误的，实际上可能会在 service worker 中缓存我不想缓存的内容。在文档中，它讨论了如何使用别名配置 webpack，我想我会试一试。我在.vuepress/config.js文件中配置了webpack:

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

MD 现在是:

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

没有错误，但可能不足为奇的是，字符串文字再次传递到我的组件中。我想也许我可以从 webpack 中引入某种导出来强制它转换图像名称，但我没有得到任何工作。谁能帮忙？

Answer 1

嘿嘿嘿，如果我明白你的意思，我的解决方案如下所示:config.js 是:

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

我的文件结构是:

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

然后使用此别名，如:![icon](~@assets/icon.png)