Cirry's Blog

Astro实现相对路径引用图片

2024-10-22
技术 astro
2分钟
348字

问题

之前也是有小伙伴提出了这个需求,就抽个时间来研究一下怎么实现。

在开发的过程呢,也是遇到了一点小问题。

首先当前文章所在的目录层级如何,在打包后会被移动到/public目录下,并对文件进行hash处理。

也就是说在/src/content/blog/astro-theme-yi.md文档下使用![](./img.png)方式来引入文件之后,这个图片文件在打包后会被移动到dist/_astro/img.aSctzhYb.png文件

Astro-动态导入图片官网文档中也有说明,本地图片必须导入 .astro 文件中才能显示。但有时,你会想或需要动态地导入图片路径,而不是明确地导入每一张图片。

期望

期望就是在md文件中使用![](./img.png) 来实现相对路径的图片引入。

在Astro内部中没有方法直接在MD文档中使用src文件里的图片。

我构想了一个方案是用插件来实现这个功能,大致还是读取md文档的内容,修改md的图片链接地址。在把src下的图片文件copy到public下的某一个目录下。

这种方法可行,但是还不如在写MD的时候直接把图片放在public下。。。所以一直没动手,在观望一下吧,说不定哪天Astro就支持了。

本文标题:Astro实现相对路径引用图片
文章作者:Cirry
发布时间:2024-10-22
感谢大佬送来的咖啡☕
alipayQRCode
wechatQRCode