← Back to blog list

如何在博客中添加图片和居中文本

released at 9/4/2025

🖼️ 图片和文本样式演示

让你的博客更加生动有趣


基础图片展示

下面是一个标准的 Markdown 图片:

Next.js Logo

居中的大图

博客封面图片

这是一个居中的封面图片

文字居中示例

🎯 重要公告

这段文字是居中显示的

你可以用这种方式突出重要信息


步骤说明(带图片)

步骤 1:准备图片

步骤1

将图片放在 public/images/blog/ 目录下

步骤 2:编写 Markdown

步骤2

使用正确的语法引用图片

步骤 3:查看效果

步骤3

在浏览器中查看最终效果


对比展示

修改前

修改前

样式单调

修改后

修改后

丰富多样


特殊样式的引用

引用图片
"设计不仅仅是外观和感觉,设计是如何工作的。"
— Steve Jobs

小贴士区域

💡 专业建议

使用高质量的图片可以显著提升博客的专业性和可读性。
记得优化图片大小,保持加载速度。


🎉 完成!

现在你知道如何在博客中添加漂亮的图片和居中文本了