如何在Tailwind Next.js Starter Blog的Markdown文章中添加GIF图片？
2026-8-15
解决Tailwind Next.js Starter Blog中GIF无法显示的问题
- 核心原因：你用的这个模板基于Next.js，Markdown文件存在
content目录下，编译后页面的路由和原Markdown文件不在同一层级，所以相对路径./Insertion-sort.gif找不到资源。 - 快速解决步骤：
- 在项目根目录的
public文件夹里新建一个子文件夹（比如gifs），把你的Insertion-sort.gif放进去，路径就是public/gifs/Insertion-sort.gif。 - 在Markdown博文中改用根路径引用：
- Markdown语法：
 - HTML标签写法：
<img alt='Insertion-sort' src='/gifs/Insertion-sort.gif' />
- Markdown语法：
- 在项目根目录的
- 验证：重启开发服务器（
npm run dev），刷新Chrome页面就能看到GIF了。
内容的提问来源于stack exchange，提问作者adi prastiyo
相关产品推荐
相关产品推荐
