Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

资源管理插件与redirectLocalRootUrl插件冲突显示问题 #909

Closed
kmfors opened this issue Jan 2, 2025 · 5 comments
Closed

资源管理插件与redirectLocalRootUrl插件冲突显示问题 #909

kmfors opened this issue Jan 2, 2025 · 5 comments

Comments

@kmfors
Copy link

kmfors commented Jan 2, 2025

场景复现条件:

  1. 项目名称为book,图片资源存放路径是 D:/learn/book/1_store/1_asset/
  2. 使用 redirectLocalRootUrl 插件设置图片根目录为 D:/learn/book ,同时typora图片设置为使用相对路径(不加 .

解释我为什么设置第2步:将笔记上传,我便能在代码托管平台看到笔记中存放的图片(基于项目根目录去找),这样就很好的避免了将图片存放于云端或转成base64。

所以每次插入图片如图所示:
image

但清理图片资源时发现一个问题:实际上 D:/ 目录下没有 1_store 的文件夹,图片中展示的路径缺少了 learn/book
image

其实这也很好解释 存在于md文件但不存在于文件夹的资源展示 (希望增加一个隐藏展览的按钮)为什么能出现这样的情况,可能引用了md文件里的图片路径(实际不存在,用的相对),应该与与redirectLocalRootUrl 插件使用没有协调好。

@kmfors kmfors changed the title 资源管理插件:路径显示错误问题 资源管理插件与redirectLocalRootUrl插件冲突显示问题 Jan 2, 2025
@obgnail
Copy link
Owner

obgnail commented Jan 21, 2025

你好,感谢反馈。

资源管理插件 已经对 redirectLocalRootUrl插件 做了兼容处理。

麻烦升级到最新版本试用。


此 issue 关闭,如有问题,麻烦在下面留言或者另开 issue。

@obgnail obgnail closed this as completed Jan 21, 2025
@kmfors
Copy link
Author

kmfors commented Jan 21, 2025

@obgnail
感谢作者的处理,不过我还是有疑问哈。挂载目录,应该就是设置的项目根目录吧,为什么插入一张图片后,它的信息会出现在存在于md文件但不存在于挂载目录的资源中呢,插入后的图片应该处于挂载目录了吧(虽然图片是放在1_store/1_asset里)

Image

Image

@obgnail
Copy link
Owner

obgnail commented Jan 22, 2025

@kmfors

你好,感谢反馈。

分析

问题出在了这一行,我使用了 node.js 自带的 path.resolve 方法去获取真正的图片地址。

src = resolve(sourceRoot, src)

我用一个简单代码向您解释:

const path = require("path")

// 重定向的目录
const sourceRoot = "D:/learn/book/"

// 您在 markdown 文件中的图片地址
const imagePath1 = "/1_store/1_asset/image-20250121171059579.png"

const imagePath2 = "1_store/1_asset/image-20250121171059579.png"
const imagePath3 = "./1_store/1_asset/image-20250121171059579.png"

const result1 = path.resolve(sourceRoot, imagePath1)
const result2 = path.resolve(sourceRoot, imagePath2)
const result3 = path.resolve(sourceRoot, imagePath3)

console.log(result1) // 输出: D:\1_store\1_asset\image-20250121171059579.png
console.log(result2) // 输出: D:\learn\book\1_store\1_asset\image-20250121171059579.png
console.log(result3) // 输出: D:\learn\book\1_store\1_asset\image-20250121171059579.png

发现上面的 result1 就是你上面的图片中显示的地址;而 result2 才是真正的图片地址。


也就是说:您的下面这句其实是不成立的。在绝大多数语言看来,相对目录是不能以 / 开头的,要么是 ./1_store/1_asset/image-20250121171059579.png,要么是 1_store/1_asset/image-20250121171059579.png。因为会和 POSIX 接口的绝对路径混淆。

2. 使用 redirectLocalRootUrl 插件设置图片根目录为 D:/learn/book ,同时typora图片设置为使用相对路径(不加 .

总结

/ 开头会被认为是绝对路径:

![test](/1_store/1_asset/image-20250121171059579.png)

正确的使用方法应该去掉最前面的 /

![test](1_store/1_asset/image-20250121171059579.png)

您试一下去掉最开始的 /,问题应该能得到解决。

@obgnail
Copy link
Owner

obgnail commented Jan 22, 2025

我晚上仔细想了一下,好像设置成如下是有道理的。

![test](/1_store/1_asset/image-20250121171059579.png)

因为功能的名字是 重新向根目录,既然更改了根目录,那么 /1_store/1_asset/image-20250121171059579.png 就应该视为从根目录出发。

看样子应该是要兼容这种情况的,我明天再仔细考虑考虑。

@kmfors
Copy link
Author

kmfors commented Jan 23, 2025

好的,麻烦了。主要是 / 分什么样的场景去理解它,您说的两种我都能是能理解的,并且我是偏向于前面加 /,理由也正是您说的那样 。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants