Skip to main content

Base64 Image Example

· 3 min read
Anand Raja
Anand Raja
Senior Software Engineer

You can use these components to display base64 encoded images and SVG strings in your MDX files.

Base64Image Component​

Basic Usage (Left Aligned - Default)​

House image

Center Aligned Image​

House image centered
A beautiful house centered on the page

Right Aligned Image​

House image right aligned
House image aligned to the right

With Custom Dimensions​

House image

With Custom Styling​

House image
Styled image with border radius and shadow

With CSS Class​

House image

SvgImage Component​

Using SVG from Constants​

// In src/data/svgConstants.ts
export const SKY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" fill="#87CEEB"/>
  <circle cx="20" cy="20" r="10" fill="#FFD700"/>
</svg>`;
import SvgImage from '@site/src/components/SvgImage';
import { SKY } from '@site/src/data/svgConstants';

<SvgImage svg={SKY} width={200} />

Inline SVG String​

Sky with sun - inline SVG

SVG Import from constant​

image/svg+xml Openclipart sky with clouds 2007-09-16T22:34:01 blue sky with clouds, can be used as a background http://openclipart.org/detail/5525/sky-with-clouds-by-shokunin shokunin blue blur clip art clipart clouds day gradient image media public domain sky summer svg transparency
Sky imported from constants

SVG with Different Alignments​

Left Aligned:

LEFT
Left aligned SVG

Center Aligned:

CENTER
Center aligned SVG

Right Aligned:

RIGHT
Right aligned SVG

Usage Examples​

Import from constants:​

import Base64Image from '@site/src/components/Base64Image';
import SvgImage from '@site/src/components/SvgImage';
import { HOUSE } from '@site/src/data/imageConstants';
import { SKY } from '@site/src/data/svgConstants';

<Base64Image 
  src={HOUSE} 
  alt="House" 
  align="center" 
  width={400}
  caption="My house image" 
/>

<SvgImage 
  svg={SKY} 
  width={200} 
  align="center"
  caption="Beautiful sky" 
/>

Use inline:​

<SvgImage 
  svg={`<svg>...</svg>`}
  width={300}
  align="right"
  caption="Custom SVG graphic"
/>