Guide: How to Add Images to Your Posts
GuidesOctober 10, 2024

Guide: How to Add Images to Your Posts

R
Rohan

Senior Editor

Adding Images

Since we are using Markdown, adding images is very simple. You have two main options:

Option 1: External URL (Easiest)

You can use any image hosted on the internet (Unsplash, Imgur, Cloudinary).

Code:

![A cute cat](https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=500)

Result: A cute cat


Option 2: Local Images (Recommended for Speed)

  1. Save your image in the public/images folder of your project (e.g., public/images/chart.png).
  2. Reference distinguish it starting with /.

Code:

![My Chart](/images/chart.png)

(Note: If you don't have a public/images folder yet, create it!)

Option 3: Captioning

You can use standard HTML if you want to add captions or resize specifically.

<div style={{ textAlign: 'center' }}>
  <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=300" alt="Small Cat" />
  <p><em>Figure 1: A very small cat</em></p>
</div>

Result:

Small Cat

Figure 1: A very small cat