在 Vue 组件中解析 webpack 图像源（在 Vuepress 中）

Posted 2023-02-22

【中文标题】在 Vue 组件中解析 webpack 图像源（在 Vuepress 中）

【英文标题】：Resolve webpack image source within Vue Component (within Vuepress)

【发布时间】：2019-08-29 00:20:08

【问题描述】：

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

在 Markdown 中引用这些图像是没有问题的。例如：

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

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

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

但是现在我得到了没有添加 webpack 后缀的字符串文字。我知道我可以将图像放入.vuepress/public，但这似乎是错误的，并且实际上可能会在服务人员中缓存我不想要的东西。在文档中，它讨论了如何使用别名配置 webpack，我想我会尝试一下。我在.vuepress/config.js文件中配置了webpack：

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

MD 现在是：

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

没有错误，但也许并不奇怪，字符串文字刚刚再次传递到我的组件中。我想也许我可以从 webpack 中提取某种导出来强制它转换图像名称，但我没有得到任何工作。有人可以帮忙吗？

【问题讨论】：

如果你找到了让它工作的方法，请告诉我们

【参考方案1】：

如果由于某种原因您无法使其与 configureWebpack 一起使用，请尝试使用 chainWebpack。

const path = require("path"); // Don't forget this

module.exports = 
  chainWebpack: config => 
    config.resolve.alias.set('@assets', path.resolve(__dirname, "../assets"))
  

我的结构

|-- .vuepress
|   |-- config.js
|-- assets
|   |-- foobar.jpg

别名如![My foobar](~@assets/foobar.jpg)

【参考方案2】：

Heellooooo 那里，如果我明白你的意思，我的解决方案如下所示： 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)