本站点的文章在嵌入html图片时发现的问题
198 字
1 分钟
本站点的文章在嵌入html图片时发现的问题
今天在使用 HTML 嵌入照片到 src\content\posts\2026-07-15-ubisoft-tester-assessment.md 里时，使用了如下代码：
<div align="center"> <img src="images/2026-07-15-ubisoft-tester-assessment.assets/ezio_clinging_bug.png" alt="Ezio Clinging Bug" width="600" style="border-radius: 8px; max-width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.15);" /></div>本地预览没问题，但是 pnpm dev 打开网页查看之后，发现图片显示失败。
一、 问题现象
如图：
放大预览：
查看控制台之后发现：
GET http://localhost:4321/posts/2026-07-15-ubisoft-tester-assessment/images/2026-07-15-ubisoft-tester-assessment.assets/ezio_clinging_bug.png 404 (Not Found)- 图片原本的路径：
src/content/posts/images/2026-07-15-ubisoft-tester-assessment.assets/ - 但是实际上请求：
/posts/2026-07-15-ubisoft-tester-assessment/images/2026-07-15-ubisoft-tester-assessment.assets/xxx.png
二、 原因分析
这篇文章的 URL 是 /posts/2026-07-15-ubisoft-tester-assessment/
HTML <img src="images/..."> 中的相对路径会基于当前页面 URL 解析，所以浏览器拼出了 /posts/2026-07-15-ubisoft-tester-assessment/images/...
三、 解决方法
只能改回 Markdown 标准语法 
其他的图片因为是用的链接所以没问题。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
本站点的文章在嵌入html图片时发现的问题
https://hodaru.com/posts/firefly/2026-07-21-fix-image-html-grammar/相关文章智能推荐
1
折腾Firefly的经历
Firefly记录折腾CuteLeaf/Firefly的经历
2
TV动画《我心里危险的东西》官网开屏动画复刻
Web深入解析并复刻 TV 动画《我心里危险的东西》（bokuyaba-anime.com）官网标志性的分层组装开屏动画，涵盖 9 图层形变归位、贝塞尔曲线缓动、加载圈动画与两阶段状态机控制。
3
周边效果交互预览: 3D光栅卡与透光藏图卡
ACGN3D实体光栅卡及物理透光藏图卡的物理光影效果交互预览
4
一些周边定制以及价格等
Goods想定制一些周边,一些想法以及价格等等
随机文章随机推荐
评论区
たびごころの 赴くままに
文章
13
分类
6
标签
11
总字数
28,300
运行时长
0 天
最后活动
0 天前
站点域名hodaru.com
Fireflyv6.14.5
Astrov7.0.7
Nodev22.23.1
pnpmv9.14.4
构建时间2026年7月26日 03:53:09
系统信息Linux / x86_64