Adding Text to an Image

You can add text on top of your image with text-based overlays.

Example

• CldImage

  <script>
  	import { CldImage } from 'svelte-cloudinary';
  </script>
  
  <CldImage
  	width="1335"
  	height="891"
  	src="images/sneakers"
  	sizes="100vw"
  	overlays={[
  		{
  			width: 2670 - 20,
  			crop: 'fit',
  			position: {
  				x: 140,
  				y: 140,
  				angle: -20,
  				gravity: 'south_east'
  			},
  			text: {
  				color: 'blueviolet',
  				fontFamily: 'Source Sans Pro',
  				fontSize: 160,
  				fontWeight: 'bold',
  				textDecoration: 'underline',
  				letterSpacing: 14,
  				text: 'Cool Beans'
  			}
  		}
  	]}
  	alt="Sneakers with Cool Beans"
  />

• getCldImageUrl

Learn More

• CldImage
• getCldImageUrl